DIV+CSS设计要注意的问题（兼容、排版等）

最新推荐文章于 2024-09-15 21:53:51 发布

dengxingbo

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量1.2k

点赞数

文章标签： div css float ie firefox 浏览器

本文链接：https://blog.csdn.net/dengxingbo/article/details/5377937

版权

1、css 命名不能带下划线开头，不然ie6某些版本不识别。如 <div class="_box"></div>.

2、IE6 下 DIV 最小高度不能为 0 或小于12 的解决方法。

在网页布局时常会用到 DIV 来显示一些边角背景，需要设置较小的高度，默认情况下，IE6 中设置 DIV 较小高度会不起作用，在 IE7、FF 等浏览器不存在这个问题。

IE6 下默认的字体尺寸大致在 12 - 14px 之间，当你试图定义一个高度小于这个默认值的 DIV 的时候， IE6 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height:5px; 来定义了一个 DIV 的高度，实际在 IE6 下显示的仍然是一个 12px 左右高度的层。

要解决这个问题，可以强制定义该 DIV 的字体尺寸，或者定义 overflow 属性来限制 DIV 高度的自动调整。比如:

或者

值得注意的是，设置 font-size:0 时这个容器的高度最小为 2px ，如果要设置 DIV 高度为 0 或 1px ，则需要使用 overflow:hidden; 来实现。

3、IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法。

先看css代码:
div { float:left; margin-left:10px; width:420px; height:150px; border:1px solid red }
这样设置左边距设置为10px，但IE6.0解释为20px，解决办法就是是加上display:inline
代码
div { float:left; margin-left:10px; display:inline; width:420px; height:150px; border:1px solid red }

4、html中width元素无效的解决办法。对于内联元素（span,a 或者 display: inline元素），对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。

方法一，

如果设置display:block，width属性生效，但是此时的span跟div一样了。
如果设置display:inline-block，则span并列在同行，而且width属性生效。

元素display属性的常见值说明：
block：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。
inline：内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行。

inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。
non：隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间。

解决方法二，如果设置float:left | right,width属性生效.
(浮动)他使得指定元素脱离普通的文档流而产生的非凡的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。

display：inline属性与float的区别
Display：inline；属性的作用就是使块级元素变成行内元素，比如p这样的，设置inline属性以后，就会不再单独占据一行的位置了。不过使用float 属性页同样可以实现这样的效果。（关于行内元素和块级元素请看行内元素和块级元素）
当元素设置成为inline属性，变成行内元素以后，设置width属性也就没有效果了。
看完display：inline对块级元素的影响以后，我们再来看看float对行内元素的影响
也就是当行内元素设置float属性以后，实际上他已经认为他是块级元素了，可以设置 width属性了。

5、页html中有注释:  ie正常,firefox就不正常
解决方案：
注释内容两边的“—”一样长就好了。

6、Firefox 和 IE 都支持的 Alpha 透明效果

filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* Moz + FF */ opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/

IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数。