如何回答前端面试中的“谈论浏览器兼容性”问题？

这里是书征学院门前的一小堂课. 此分析的主题是

今天要与您分享，您遇到什么浏览器兼容性？原因，解决方案是什么，常用的黑客技术

所谓的浏览器兼容性问题，是指由于不同的浏览器对同一代码的解析不同而导致页面显示效果不一致的情况. 在大多数情况下，我们的要求是，无论用户使用哪种浏览器查看我们的网站或登录我们的系统，它都应具有统一的显示效果. 因此，浏览器兼容性是我们Web开发人员经常遇到且必须解决的问题.

解决浏览器兼容性的主要方法是CSS hack. 那么CSS hack到底是什么？

由于不同制造商的浏览器或不同版本的浏览器（例如IE6-IE11，Firefox / Safari / Opera / Chrome等），对CSS的支持和解析是不同的，这导致在不同的浏览器环境中. 显示页面演示效果不一致. 此时，为了获得统一的页面效果，我们需要针对不同的浏览器或不同的版本编写特定的CSS样式. 我们称此为不同的浏览器/不同版本编写相应的CSS代码的过程称为CSS hack！

3.1默认的内部和外部边距不同

解决方案一. 直接使用* {保证金: 0;填充: 0；}

方法二. 清除需要分别删除的元素，例如body，h1，h2，h3常见的浏览器兼容问题，h4，h5，h6，p，列表元素dl常见的浏览器兼容问题，dt，dd，ul，ol，li，表单元素，字段集，图例，按钮，输入，文本区域等.

当3.2个元素中有图片时，ie6-7中的图片中将有空隙

解决方案

1. 在源代码中将div和img放在同一行

2. 将图片转换为块级对象显示: block;

3. 设置图像的垂直对齐方式垂直对齐: 顶部/中间/底部

4. 设置图像float的float属性: left;

3.3 ul和ol列表的缩进

在IE中，设置边距: 0px可以删除缩进，空白和列表编号或列表中的点. 设置填充对样式没有影响；

在Firefox浏览器中，设置边距: 0px仅会删除顶部和底部边距，而填充: 0px仅会删除左侧和右侧的缩进. 您还必须设置列表样式: 无以删除列表编号或点. 也就是说，在IE中只能设置margin: 0px才能达到最终效果，而在Firefox中，margin: 0px，padding: 0px和list-style: 都不能设置以达到最终效果.

我们只是使用了更通用的方法. 那黑客呢？

CSS Hack通常具有3个表达式: CSS属性前缀方法，选择器前缀方法和IE条件注释方法（即，如果IE是HTML标头）. 实际项目中的黑客大多针对IE浏览器. 引入了版本之间的性能差异.

属性前缀方法（即，内部类破解）: 例如，IE6可以识别下划线“ _”和星号“ *”，IE7可以识别星号“ *”，但不能识别下划线“ _”，IE6 〜IE10都可以识别“ \ 9”，但是firefox上面提到的三个都不是.

选择器前缀方法（例如，选择器破解）: 例如，IE6可以识别* html .class {}，IE7可以识别* + html .class {}或*: 第一胎+ html .class {}.

IE条件注释方法（即HTML条件注释黑客）: 对于所有IE（注意: IE10 +不再支持条件注释）: Internet Explorer针对IE6及以下版本显示的内容: 仅在IE6-中显示的内容. 这种骇客不仅适用于CSS，而且适用于判断语句中编写的所有代码.

background-color: 橙色； / *全部用于Firefox / Chrome * /

背景色: 红色\ 0; / *即8 * /

背景色: 蓝色\ 9 \ 0; / *即9/10 * /

*背景颜色: 黑色； / *即6 /即7 * /

_background-color: 绿色； / *即6 * /

还有其他黑客手段吗？

关于手形光标. 光标: 指针. Hand仅适用于IE.

要设置标签内容的样式，您需要设置display: block;

[有关更多内容，您可以加入IT交流小组565763832与大家进行讨论和交流]

[这里是技能树·IT修真: IT修真的官方网站，是初学者转入Internet的地方]

---------------------

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-161973-1.html