一个比较完美的spacer div技巧
作者：by0001 来源：蓝色理想 发布时间：2009-03-18 19:29:00
标签：css,spacer,div,自适应,技巧
在制作网页的过程中，自适应问题是经常遇到，而又最让人头疼的，看了好多种解决的方法，但是都不是万能的。今天遇到这个问题，实在让我挠头，借鉴了 Shark的方法，又给了我一个新思路。当时没仔细看LBS的样式表，今天才发现，.clear用的就是这个方法。接下来，我会做个关于“自适应高度”问题的汇总，以便今后遇到问题时候更快解决。
为了解决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后加上一个Spacer Div（clear:both）。但是IE和Mozilla对div的解释不同引起一些表现上的差异。
最简单的Spacer：
.HackBox{clear:both;}
IE可以正确地产生预期的效果，但是在Mozilla中不起作用。所以现在很多人是这么用的
.HackBox{ height:0; clear:both;}
然后XHTML中加入一个 ；，如下：
这回IE和Mozilla都起作用了，但是IE并不认 height:0; 这个规则，结果IE中的这个Spacer Div就占了一定的高度，影响布局。
经过N次实验，我发现用下面的方法能比较完美的解决这个问题。
.HackBox{
border-top:1px solid transparent !important;
margin-top:-1px !important;
border-top:0;
margin-top:0;
clear:both;
visibility:hidden;
}
其实IE只需要有clear:both;这一条就可以实现我们的要求。那么下面这两条规则有什么用呢？
border-top:1px solid transparent;
margin-top:-1px;
第一条规则产生1px的一个透明的上边框，第二条将margin-top设置为-1，以抵消这条边框对布局产生的影响。
但是不幸的是IE不支持transparent这个值，它会将这条边框变为黑色-_-
不幸中的万幸是IE这小子还有一个不支持的值，就是!important，IE会忽略这它而选择按后面两条显示，结果就是不显示边框（也就是只有clear:both;起作用了）。而Mozilla却会按!important指出的规则显示。
0
投稿猜你喜欢
- Python：1. print()函数：打印字符串2. raw_input()函数：从用户键盘捕获字符3. len()函数：计算字符长度4.
- 结合邮件告警和页面展示，再多的域名证书到期情况即可立马知道代码示例：# coding: utf-8 # 查询域名证书到期情况import r
本文实例讲述了Python实现的桶排序算法。分享给大家供大家参考，具体如下：桶排序也叫计数排序，简单来说，就是将数据集里面所有元素按顺序列举- 翻译：用法：zeros(shape, dtype=float, order='C')返回：返回来一个给定形状和类型的用0填充
- 最简单的例子：a = [1,1,1,1,2,2,2,3,3,1,1,1,3]# 问：计算a中最多有几个连续的1很明显，答案是4如果用代码实现
- 文档格式的排错 我妈妈_的清单中有数十条菜谱，甚至数百条。如果产生一个致命错误，排错将非常困难 - 你将一行一行地寻找丢失的标记符。如果使用
- 在数据分析中经常需要从csv格式的文件中存取数据以及将数据写书到csv文件中。将csv文件中的数据直接读取为 dict 类型和 DataFr
- 前沿小补充例3.48 查询平均成绩大于等于80分的学生学号和平均成绩SELECT Sno,AVG(Grade)FROM SCWHERE AV
- 多行正则表达式是对象的只读布尔属性。它指定是否一个特定的正则表达式进行多行匹配，即，不管是否使用“m”属性创建。语法RegExp
- 一、正则表达式的作用提示：正则表达式是一段特殊的字符串，它表示的是一段有规律的信息。如果我们想从一段文字中提取想要的内容，就可以通过正则表达
- listlist是一种有序的集合，可以随时添加和删除其中的元素。跟java不一样的是 可以使用arr[-1] 0>-x >=-
- 本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下#!/usr/bin/env python# -*- c
- 今天在修改 淘宝 宝贝详情页面的时候，发现页面在 Firefox 下遇到这样一个问题：链接用图片做背景，text-indent:-9999p
- 在pandas中的groupby和在sql语句中的groupby有异曲同工之妙，不过也难怪，毕竟关系数据库中的存放数据的结构也是一张大表罢了
- 2.1数据的爬取代码：import pandas as pddata=pd.read_csv("example_data.csv&
- 分页的首页<meta http-equiv="Content-Type" content="text/h
- 魔法方法凡是在类内部定义，以“__开头__结尾”的方法都称之为魔法方法，又称“类的内置方法”， 这些方法会在某些条件成立时触发。经常用到的双
- 一年一度的元宵节刚刚过去，由于时间关系，在元宵节当天晚上11点多才完成本文灯笼的绘制。这两天又在忙着别的事情，所以现在才跟大家分享。一、效果
- golang 字符串 int uint int64 uint64 互转字符串 转 intintNum, _ = strconv.Atoi(i
- 使用步骤：1、安装：npm i jquery-contextmenu --save-dev2、在main.js文件中引包 im
