A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

CSS浏览器兼容性?

     答题技巧:因为这个问题主要是看你经验,一般有了开发经验的都会遇到这样的坑,你只要说出几个来大致就可以了。

1.对齐文本和文本输入框

问题:
    当input元素在设置了高时,在IE7、IE8、IE9下会出现文本和文本输入框不能对齐的现象,其他正常,包括opera
解决:
vertical-align:middle;

2.容器宽度在浏览器中解释不同
   问题:
   不同浏览器下宽度不同,比如说设置width:200px,在iE7、IE8、IE9下显示的是200px,在FF、Chrome、Opera中显示的是220px
解决:
   用width:200px; *width:220px,其中iE7、IE8、IE9会识别两个宽度,以后者为准,故宽度为220px,在FF、Chrome、Opera中,识别第一个宽度,解析

3. Div居中问题
问题:
   IE7、IE8、IE9在设置了margin-left和margin-right为auto后,并不能使div居中显示,其他行
解决:
  设定body居中,定义text-algin: center

4.字体大小问题
问题:
   对字体大小small的定义不同,在Firefox和Chrome中为small,而IE7、IE8、IE9中为16px,差别挺大
解决:
   明确说明字体的大小,例如16px

5.td高度的问题 这里有兴趣的同学可以研究一下。知道了这个问题,还在研究当中
问题:
    在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;
IE6IE7 共用 *height: 100px;
IE7FF 共用 height: 100px !important;
   代码的顺序一定不能颠倒了,要不又前功尽弃了。因为浏览器在解释程序的时候,如果重名的话,会用后面的覆盖前面的,就象给变量赋值一个道理,所以我们把通用的放前面,越专用的越放后面


  这里举了几个例子,同学们可以自己总结。
  
  
游客,如果您要查看本帖隐藏内容请回复

146 个回复

倒序浏览
回复 使用道具 举报 1 0

加油加油   
回复 使用道具 举报
回复 使用道具 举报
弄成一个文档直接下载就方便了
回复 使用道具 举报
我要看资源
回复 使用道具 举报
有点坑,会不会
回复 使用道具 举报
xiyeoo 初级黑马 2017-5-15 16:01:12
8#
不错不错不错吧成本错不错吧成本错吧成本
回复 使用道具 举报
markmarkmarkmarkmarkmarkmarkmarkmark
回复 使用道具 举报
感谢分享
回复 使用道具 举报
哈哈哈啊哈哈哈哈哈啊哈哈哈
回复 使用道具 举报
和哈哈哈哈哈哈和哈哈哈哈
回复 使用道具 举报
很好 啊 多谢分享
回复 使用道具 举报
666666666666
回复 使用道具 举报
黑马网友  发表于 2017-7-2 20:20:41
15#
发沙发沙发沙发
回复 使用道具
黑马网友  发表于 2017-7-2 20:21:00
16#
适当方式的防守打法
回复 使用道具
黑马网友  发表于 2017-7-2 20:21:17
17#
发适当方式的防守打法时的
回复 使用道具
黑马网友  发表于 2017-7-2 20:22:06
18#
适当方式的发生的递四方速递
回复 使用道具
按时大叔大叔大叔
回复 使用道具 举报
总结的非常好
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马