传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

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;
   代码的顺序一定不能颠倒了,要不又前功尽弃了。因为浏览器在解释程序的时候,如果重名的话,会用后面的覆盖前面的,就象给变量赋值一个道理,所以我们把通用的放前面,越专用的越放后面


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

137 个回复

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

加油加油   
回复 使用道具 举报
回复 使用道具 举报
弄成一个文档直接下载就方便了
回复 使用道具 举报
我要看资源
回复 使用道具 举报
有点坑,会不会
回复 使用道具 举报
不错不错不错吧成本错不错吧成本错吧成本
回复 使用道具 举报
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#
适当方式的发生的递四方速递
回复 使用道具
按时大叔大叔大叔
回复 使用道具 举报
总结的非常好
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条