浏览器不兼容的因素与处理办法

浏览器之间不兼容的原因和解决方案网页设计中最大的麻烦之一是网页与不同浏览器的兼容性，这是因为主流浏览器（例如IE 6.0 / IE 7.0 / firefox 2 / Opera 9）无法进行CSS解析几乎相同，从而导致不同的页面效果. 那么什么方法可以有效解决不同浏览器页面效果不同的问题呢？广泛使用的方法是CSS Hack，它使用特殊的CSS定义在不同浏览器中显示网页的设计样式，并为不同的浏览器编写不同的CSS，以最大程度地与浏览器兼容. 通常情况下，我会照顾IE 6.0 / IE 7.0 / firefox 2.0浏览器. 技能: 以下是更常用的CSS Hack技术. 最广泛使用的技术很重要！它可以针对IE（IE 7.0可以正确理解！important），并且非IE浏览器设置不同的样式，只要在非IE浏览器样式之后添加！important，就可以优先使用它们. 因此，为了考虑IE 6.0和Firefox之间的差异，我始终使用！important. 1.仅IE7和IE5.0可以识别* + html select {…}当您只需要设置IE7和IE5.0的样式时，可以使用此HACK.

2. 仅IE7可以识别* + html select {...！important;}当只需要为IE7设置样式时，可以使用此HACK. 3. IE6和IE6下的识别* html select {…}这个地方应该特别注意许多写为IE6的HACK的博客. 实际上，IE5.x也可以识别此HACK. 其他浏览器无法识别. 4. html / ** /> body select {…}此句子与前一个句子具有相同的作用. 5.只有IE6无法识别，并且阻止IE6选择{display / * block IE6 * /: none;}，这主要是通过CSS注释来分隔属性和值，注释在冒号之前. 6.仅无法识别IE6和IE5，并且阻止了IE6和IE5. select / ** / {显示/ * IE6，IE5无法识别* /: none;}这里的区别是选择器和花括号之间有更多内容. CSS注释. 请勿阻止IE5.5. 7.仅IE5无法识别，并且阻止IE5 select / * IE5无法识别* / {…}这句话是前一句话中属性区域中的注释. 只有IE5无法识别，但IE5.5可以识别.

8. 盒模型解决方案选择{width: IE5.x width; voice-family: “ \”} \“”; voice-family: inherit; width: 正确的宽度;}未通过盒模型删除方法！重要的是，这一点必须清楚. 9.只有Opera可以识别@ media all和（min-width: 0px）{select {……}}为Opera浏览器进行单独的设置. 以上都是CSS中的HACK. 这些都是用于解决本地兼容性问题的. 如果要分隔兼容性内容，您可以尝试以下过滤器: 其中一些过滤器是通过CSS编写的，用于导入特殊样式的过滤器，有些过滤器是通过条件的HTML编写的，以链接或导入所需的补丁样式10. IE5.x过滤器，仅IE5.x是可见的@media tty {i {content: “ \”; / *“” * /}} @ import'ie5win.css'; / *“;}} / * * / 11. IE5 / MAC过滤器，通常不需要/ * \ * // * / @import“ ie5mac.css”； / ** / ---------------- ------------- ------------------------------------- -12. IE的if条件Hack提供了所有可以识别，只有IE5.0可以识别IE5.0，而IE5.5可以识别ze只有IE6可以识别IE6，低于IE6的IE5.x只能识别IE7可以识别------------------------------- ------------------- --------------编写CSS时，请将浏览器标识符添加到样式表中. 浏览器之间的差异如下: IE可以识别*，标准浏览器（例如FF）不能识别*； IE6可以识别*，但不能识别！ IE7可以识别*，但是也很重要； FF无法识别*浏览器不兼容问题，但可以识别！例如，style =“ * width: 10px;！important width: 20px;”因此宽度在IE6下为10px，在IE7下为20px ---------------------------------- ---- --------------------------最新的CSS兼容方案，使您的样式与主要浏览器完全兼容，该方案主要用于解决Safari . 在测试过程中，Opear顺便尝试了一下. 原来还可以，所以我顺便解决了.

.e {/ * FF OP * / background-color: #FF0000} html * .e {/ * Sa IE7 OP * / background-color: #FF00FF} * + html .e {background-color: #000000 ; / * OP * / * background-color: #0000FF; / * IE7 * /} * html .e {/ * IE6 * / background-color: #00FFFF}通过FF2，OP9.21，OP9.10，Sa3. 0.3（pc），IE7，IE6测试通过，如果您在另一个与IE6，IE7，FF和其他浏览器不兼容的浏览器上进行测试的原因和解决方法（转载）本文转载，作者: 阿里巴巴前端开发，发只是稍后检查它，也给需要它的朋友检查. 浏览器不兼容，每个人都绝对讨厌它. 通常我们只是修复它，却忘记了更重要的事情. 那是为了找到根本原因，避免类似的不兼容现象再次出现. 在下一节中，我将总结一些html编码元素，并希望提供一些指针: 1.文本本身的大小不兼容. 相同的是font-size: 14px. 不同浏览器占用的空间不同. 较低的实际上是16像素高，即较低的是3像素，较低的实际上是17像素，较高的是1像素，较低的为左. 白色3px在歌剧下的差异更大.

解决方案: 设置文本的行高. 确保所有文本均具有默认的行高值. 这非常重要，我们不能容忍1像素的高度差. 2.在ff下的容器的高度是有限的，也就是说，在定义容器的高度之后，将确定容器框架的形状，并且不会因内容物而变大，而在ff之下，它将变大. 内容和高度限制无效. 因此，不要轻易定义容器的高度. 3.还要水平讨论内容破坏容器的问题. 如果未定义浮动容器的宽度，则ff下的内容将尽可能扩大容器的宽度，并且将首先折叠内容浏览器不兼容问题，即. 因此，需要定义可能被内容物破坏的浮动容器的宽度. 小型实验: 如果您感兴趣，可以看一下这个实验. 在不同的浏览器中测试以下代码.

style =” border: 1px纯红色；宽度: 10px”>

本文来自本站，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-287874-1.html