黑马程序员技术交流社区
标题: 【长沙校区】2017最新web前端经典面试题之css浏览器兼容性？ [打印本页]
作者: 长沙-小知姐姐 时间: 2017-4-13 09:41
标题: 【长沙校区】2017最新web前端经典面试题之css浏览器兼容性？
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;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面
这里举了几个例子，同学们可以自己总结。
作者: 越雪 时间: 2017-4-13 09:50
可以可以
作者: 长沙-小知姐姐 时间: 2017-4-13 16:49
加油加油 
作者: 彭小豆 时间: 2017-4-14 09:08
作者: marsfan 时间: 2017-4-14 13:02
弄成一个文档直接下载就方便了
作者: 彭豆豆 时间: 2017-4-17 14:22
我要看资源
作者: 闹够了没有 时间: 2017-5-7 10:34
有点坑，会不会
作者: xiyeoo 时间: 2017-5-15 16:01
不错不错不错吧成本错不错吧成本错吧成本
作者: sinocom20 时间: 2017-5-19 10:36
markmarkmarkmarkmarkmarkmarkmarkmark
作者: 20129827 时间: 2017-5-30 23:02
感谢分享
作者: dashen_sq 时间: 2017-6-12 14:53
哈哈哈啊哈哈哈哈哈啊哈哈哈
作者: web前端 时间: 2017-6-23 09:09
和哈哈哈哈哈哈和哈哈哈哈
作者: web前端 时间: 2017-6-23 09:10
很好 啊 多谢分享
作者: 瑞-瑞 时间: 2017-6-28 10:13
666666666666
作者: shamrock 时间: 2017-7-2 20:20
发沙发沙发沙发
作者: shamrock 时间: 2017-7-2 20:21
适当方式的防守打法
作者: shamrock 时间: 2017-7-2 20:21
发适当方式的防守打法时的
作者: shamrock 时间: 2017-7-2 20:22
适当方式的发生的递四方速递
作者: renlv1 时间: 2017-7-2 20:41
按时大叔大叔大叔
作者: 猿梦 时间: 2017-7-9 00:01
总结的非常好
作者: shu_94 时间: 2017-7-12 13:20
学习学习
作者: FFF团第一任团长 时间: 2017-7-17 21:35
66666666666
作者: 1326580471 时间: 2017-7-19 23:13
看一看瞧一瞧
作者: S_Silent 时间: 2017-7-20 15:57
来寻求问题答案…………
作者: S_Silent 时间: 2017-7-20 15:58
求解答，求……………答案
作者: 慕容初晨 时间: 2017-7-21 11:43
学习。。学习
作者: 独树一帜 时间: 2017-7-22 11:00
谢谢分享
作者: ✎NaN.挂兄♫ 时间: 2017-7-25 01:06
水电费撒旦发
作者: Axjy 时间: 2017-7-26 20:41
11111111111111
作者: 1052835951 时间: 2017-7-30 16:03
非常 感谢非常 感谢非常 感谢非常 感谢非常 感谢非常 感谢非常 感谢非常 感谢非常 感谢
作者: JK连眉 时间: 2017-7-30 19:13
哇塞,666太棒了资源,赶紧保存起来
作者: learning2017 时间: 2017-7-31 08:58
学习
作者: 小黑马哥 时间: 2017-8-10 19:14
学习快乐，快乐学习！！！
作者: 123341234 时间: 2017-8-18 14:51
。111111111111
作者: love羽夜 时间: 2017-8-25 22:03
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
作者: 马腾飞 时间: 2017-8-26 12:11
3333333333333333333333
作者: hexia 时间: 2017-8-26 15:32
markmarkmark
作者: Hellohello 时间: 2017-8-26 20:04
学习学习学习学习学习学习学习学习学习学习学习学习学习
作者: 紫羽殇剑 时间: 2017-8-27 16:09
谢谢楼主
作者: domqent 时间: 2017-8-31 11:05
可以可以{:8_472:}
作者: eq361 时间: 2017-8-31 12:20
感谢
作者: xinzhanghao 时间: 2017-9-3 11:15
作者: y7361664 时间: 2017-9-5 16:53
谢谢楼主
作者: 柠檬不酸 时间: 2017-9-7 12:08
还有啥呢
作者: Gais 时间: 2017-9-8 15:59
为什么每次都要回复才能看到
作者: 大Z 时间: 2017-9-9 20:58
1111111111
作者: 幸运的小猪 时间: 2017-9-9 22:44
谢谢分防享
作者: evading 时间: 2017-9-11 16:35
学习~~~~~~~~~~~~~~~~~~~
作者: chenjinmei 时间: 2017-9-11 21:47
6666666666666666666666666
作者: lchlch0000 时间: 2017-9-13 15:54
发蛙沙发沙发
作者: 德古拉·小焲 时间: 2017-9-14 00:47
赞赞赞赞赞赞
作者: 黄胜洪 时间: 2017-9-16 10:33
作者: Y_G_G 时间: 2017-9-21 22:08
又要回复？
作者: waqr 时间: 2017-9-23 11:31
撒旦撒法大使
作者: 繁华落尽的凄凉 时间: 2017-9-27 15:02
代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面
作者: newu 时间: 2017-10-4 12:45
666666666666
作者: a1010166 时间: 2017-10-10 20:31
收下了，感谢
作者: aalkj 时间: 2017-10-14 19:15
学习学习
作者: 范雅柔 时间: 2017-10-14 21:49
666666666666666666666
作者: 嘎嘣脆 时间: 2017-10-16 11:31
666666666666
作者: 榕树长枫叶 时间: 2017-10-17 15:18
长见识了
作者: 星芒背刺 时间: 2017-10-18 00:49
66666666666666666666
作者: suny_smile 时间: 2017-10-20 16:59
，看看~~~·
作者: 魏聪 时间: 2017-10-23 16:14
http://bbs.itheima.com/forum.php ... &extra=page%3D1
作者: zmalqp1101 时间: 2017-10-24 15:35
前来学习
作者: 尤丽喜 时间: 2017-10-27 09:56
我要看看
作者: Mrjane 时间: 2017-10-29 13:10
努力学习，面试题也要学习。
作者: Ghostmanice 时间: 2017-10-29 23:23
谢谢分享
作者: cc886 时间: 2017-11-4 11:28
学习了
作者: 王大可 时间: 2017-11-15 21:32
棒棒棒棒棒棒棒棒棒
作者: aaxjl123 时间: 2017-11-17 10:26
谢谢楼主分享
作者: zhu2018zhu 时间: 2017-11-17 13:07
感谢分享
作者: HiDarker 时间: 2017-11-18 14:51
好好好好好好好好好好好好好
作者: 北京爱情 时间: 2017-11-18 15:23
全是技巧
作者: qqlcx5 时间: 2017-12-5 15:16
好给力啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
作者: 2293501783love 时间: 2017-12-6 08:42
tingbucuod
作者: 犹豫不决 时间: 2017-12-6 13:21
快乐学习，快乐学习！
作者: thomas693 时间: 2017-12-9 16:21
厉害
作者: 123hl 时间: 2017-12-11 12:30
谢谢
谢谢谢谢
作者: JMmamaLi 时间: 2017-12-11 13:34
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
作者: 努力努力ing 时间: 2017-12-12 14:40
学习学习
作者: 1404932287 时间: 2017-12-12 16:57
学习了,谢谢大佬
作者: Tymon 时间: 2017-12-15 16:28
qwqwqwqwqwqwqwqwqw
作者: jjjt 时间: 2017-12-18 11:30
RTERTERTRETRETR
作者: nicehxj 时间: 2017-12-20 09:54
经验总结啊，要好好的学习学习
作者: 黄春松 时间: 2017-12-24 13:49
好想看看
作者: riyyao 时间: 2017-12-27 10:29
学习下，谢谢
作者: 孝宇兄 时间: 2017-12-29 20:32
感谢小只分享
作者: andylz 时间: 2017-12-31 21:09
好人一生平安
作者: 六度Zero 时间: 2018-1-9 18:43
1111111111111111111
作者: 维克多噗噗 时间: 2018-1-10 19:23
width:200px; *width:220pxwidth:200px; *width:220px
作者: bbaaoo 时间: 2018-1-16 16:19
作者: Jane套 时间: 2018-1-17 09:12
2017最新web前端经典面试题之css浏览器兼容性？
作者: 牛仔很忙fire 时间: 2018-1-17 14:33
感谢分享
作者: 飘荡 时间: 2018-1-20 21:41
gei到了，谢谢
作者: 舒服 时间: 2018-1-22 10:42
作者: ktqhkhl 时间: 2018-1-23 16:05
浏览器兼容性
作者: shenpeng 时间: 2018-1-24 10:04
厉害了厉害了
作者: xhakng1314 时间: 2018-1-24 20:34
这是一个强大的模块化前端框架
作者: yangmingwei 时间: 2018-1-25 09:50
wrwerwerwerwerwqrwqerqwrwrqwerqwerqwerwqer
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |