服务Q Q:75303307

网站优化

网站建设

工作时间:周一至周五:8:30-6:00 周六、日:9:00-5:00

技术点滴

您的位置:主页 > 新闻观点 > 技术点滴 > 详细内容>

要特别注意的一些CSS兼容细节

2012-08-09 17:34 作者:admin [ ]

1, FF下给div设置padding 后会导致width和height增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.

解决办法:给DIV设定IE、FF两个宽度,在IE的宽度前加上IE特有标记" * "号。

2, 页面居中问题.

body {TEXT-ALIGN: center;} 在IE下足够了,但FF下失效。

解决办法:加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "

3, 有的时候在IE6上看见一些奇怪的间隙,可高度明明设好过。

解决办法:试试在有空隙的DIV上加上"font-size:0px;"

4, 关于手形光标. cursor: pointer. 而hand只适用于IE.

5, 浮动IE6产生的双倍距离


#box{ float:left;
  width:100px;
  margin:0 0 0 100px;
}

这种情况之下IE6会产生200px的距离

解决办法:加上display:inline,使浮动忽略

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果

6 页面的最小宽度

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重要的。

解决办法:为了让这一命令在IE上也能用,可以把一个〈div〉放到〈body〉标签下,然后为div指定一个类:然后CSS这样设计:


#container{
  min-width: 600px;
  width:e¬xpression(document.body.clientWidth 〈 600? “600px”:“auto” );
}

第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7、UL和FORM标签的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0;

解决办法:css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.

8、DIV浮动IE文本产生3象素的bug

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.


#box{float:left;width:800px;}
#left{float:left;width:50%;}
#right{width:50%;}
*html #left{margin-right:-3px;}//这句是关键
HTML代码
〈DIV id=box〉
  〈DIV id=left〉〈/DIV〉
  〈DIV id=right〉〈/DIV〉
〈/DIV〉

针对上面这段代码,下面再描述一下:

第一、只要right定义了width属性,在FF下绝对就会两行显示。第二、两个width都定义为百分比的话,就算都为100%在IE下也会一行显示。所以上面那句所谓“这句是关键”根本没用,不加也在一行,除非你width定义的是数值才用得上。可以看出上面这段代码其实用处不大,至少在FF下不行。其实只要只定义left的width就行了,right不定义width就不管在IE还是FF下都能成功,但这样的话父DIV BOX并没有真正的包含LEFT和RIGHT两子DIV,可以用上面的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就OK了!

9、截字省略号


.hh { -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
  white-space:
  nowrapoverflow:hidden;
}

这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾。技术是好技术,很多人都喜欢乱用,但注意Firefox并不支持。