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 个回复

正序浏览
哈哈哈哈哈哈哈哈哈嗝
回复 使用道具 举报
发是发十大阿斯顿
回复 使用道具 举报
回来学习
回复 使用道具 举报
谢谢分享!!!
回复 使用道具 举报
资料资料,想看资料啊
回复 使用道具 举报
6666666666666666666666666666666666666
回复 使用道具 举报
我就看看哈哈哈
回复 使用道具 举报
感谢感谢
回复 使用道具 举报
播妞厉害了啊
回复 使用道具 举报
TKXDD 初级黑马 2018-11-11 18:27:35
138#
ting   hao  de
回复 使用道具 举报
6666666666666666666
回复 使用道具 举报
回复 使用道具 举报
好东西要分享
回复 使用道具 举报
真么深奥的吗
回复 使用道具 举报
有没有文档
回复 使用道具 举报
加油加油
回复 使用道具 举报
回复 使用道具 举报
弄成一个文档直接下载就方便了
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马