更新时间:2018-12-06 来源:黑马程序员技术社区 浏览量:
CSS浏览器兼容性?
问题:
当input元素在设置了高时,在IE7、IE8、IE9下会出现文本和文本输入框不能对齐的现象,其他正常,包括opera
解决:
vertical-align:middle;
问题:
不同浏览器下宽度不同,比如说设置width:200px,在iE7、IE8、IE9下显示的是200px,在FF、Chrome、Opera中显示的是220px
解决:
用width:200px; *width:220px,其中iE7、IE8、IE9会识别两个宽度,以后者为准,故宽度为220px,在FF、Chrome、Opera中,识别第一个宽度,解析
问题:
IE7、IE8、IE9在设置了margin-left和margin-right为auto后,并不能使div居中显示,其他行
解决:
设定body居中,定义text-algin: center
问题:
对字体大小small的定义不同,在Firefox和Chrome中为small,而IE7、IE8、IE9中为16px,差别挺大
解决:
明确说明字体的大小,例如16px
问题:
在IE9、IE10、FF、chrome中table中td的高度不包含border的宽度,但是IE7和IE8中td的高度包含了border的高度,设置line-height和height一样。
解决:
6.如何对其文本和文本输入框的内容()
问题:
当input元素在设置了高和设置了text-align:center时,在IE7、IE8、IE9下会出现文本和文本输入框内容不能对齐的现象,其他正常,包括opera
解决:
在样式中设置line-height:100px
7.CSS HACK的方法
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
代码的顺序一定不能颠倒了,要不又前功尽弃了。因为浏览器在解释程序的时候,如果重名的话,会用后面的覆盖前面的,就象给变量赋值一个道理,所以我们把通用的放前面,越专用的越放后面
这里举了几个例子,同学们可以自己总结。