前端面试题十二

一、你最喜欢的图片替换方法是什么，你如何选择使用。

设计师能够用一张背景图像替代某元素中的原始文字，以期显示出更美观的字体。

实现方法 ：

1、添加span标签 该技巧的实现非常简单：用span将元素中的文本包围起来，然后通过应用CSS样式隐藏这个span中的文本，最后将背景图像应用到该元素之上即可。例如，对于下面的这一段HTMl标记。

2、负text-indent属性值 设计师Mike Rundle提出了一种使用负text-indent属性值的方法，将文本推到屏幕的左边缘之外。虽然该方案的适用性并不广泛——IE 5.0会将背景图片随文本一起推出浏览者的视线范围——但却相当简洁优雅。 缺点：并没有解决浏览器禁用图像后空白页面的可访问性问题；有时在IE 5.0中无法使用。

意义：而图像替换技术则保留了被替换元素中的原有文本，因此无论对何种客户而言，理解页面内容都不成问题。主要是考虑SEO，而非视觉上的效果。

 

二、你会如何解决特定浏览器的样式问题？

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前，我想把前端开发人员划分为两类：

第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。

第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。

文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。（相关文章推荐：主流浏览器CSS 3和HTML 5兼容清单）

作者：Arno_z
链接：https://www.jianshu.com/p/1c314dd0ba1f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。