当前位置 : IT培训网 > 求职攻略 > web前端经典面试题大盘点 css浏览器兼容性你知几何

web前端经典面试题大盘点 css浏览器兼容性你知几何

时间:2018-09-13 15:20:15  来源:web前端网  作者:IT培训网  已有:名学员访问该课程
对于web前端面试问题,你知道哪些?web前端面试苦了一些求职者,对一些未知的情况,我们需要做更为深入的了解,点滴积累终成宝典,今天IT培训网小编要谈的是CSS浏览器兼容性问题,对于该问题你又了解多少?

对于web前端面试问题,你知道哪些?web前端面试苦了一些求职者,对一些未知的情况,我们需要做更为深入的了解,点滴积累终成宝典,今天IT培训网小编要谈的是CSS浏览器兼容性问题,对于该问题你又了解多少?

web前端经典面试题大盘点 css浏览器兼容性你知几何_www.itpxw.cn

有关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;

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

以上是有关CSS兼容性的常见问题,希望有助于大家职场面试通关,更多精彩内容不定时更新,请及时关注。

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始! IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清?点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通,咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
------分隔线----------------------------

推荐内容

相关热点