前端浏览器兼容性问题和解决方案_计算机软件和应用程序_IT /计算机_资料

放入

在标记下，然后为div指定一个类，然后像这样设计CSS: #container {min-width: 600px; width: expression（document.body.clientWidth

示例: ？解决方案: 在P对象的前后添加一个div对象，并向div对象添加一个border属性. 8. IE图片的间距是否存在问题？解决此错误的方法有很多，可以是更改html布局，或将img设置为display: block或将vertical-align属性设置为vertical-align: top |. 底部|中间|文本-底部可以解决. IE9. 对齐文本和文本输入框问题，再加上垂直对齐: 中间； 10. Web标准中的id和class之间有区别吗？ WEB标准不允许重复的ID，例如div不允许重复两次，并且class定义了一个类. 从理论上讲，它可以无限期地重复，以便可以使用需要多个引用的定义？属性优先级: ID优先级是否高于类？对于客户端脚本（例如JS），这很方便. 如果要在页面中编写对象脚本，则可以为其定义一个ID，否则只能通过遍历页面元素并指定特定属性来找到它，这是相对时间和资源的浪费，而且要少得多比ID更简单. 11. li中的内容超过长度后，此方法显示为省略号. 此方法适用于IE和OP浏览器. 12.为什么我们不能定义一个高度约为1px的容器？ IE6下的此问题是由默认行高引起的，并且有许多解决方案. 例如: overflow: hidden |放大: 0.08 | line-height: 1px，等等.

13. 如何在浏览器中垂直居中div？ ？这里我们使用百分比绝对定位，以及修补负值的方法，负值的大小是其自身的宽度和高度除以二. 14. Div居中问题？当将margin-left和margin-right设置为auto时，div居中. IE浏览器不起作用. IE需要将主体设置为居中. 首先定义text-algin: 在父元素中居中；这意味着它位于父级中. 元素内的内容居中. 15.P标签嵌套块元素问题p标签嵌套div

div

请务必遵循块元素嵌套的规则！ 16.访问链接后没有显示悬停样式吗？单击并访问的超链接样式不再具有悬停和活动状态. 很应该已经遇到了这个问题. 解决方案是更改CSS属性的顺序: LVHA示例: LVHA: 链接选择器: 访问的选择器: 悬停选择器将链接设置为未访问的链接样式，将访问的页面设置为鼠标指针浮动在其上选择器用于活动链接？注意: 在CSS定义中，: hover必须位于: link和: visited之后（如果存在），以便样式生效. 17.光标手指光标？光标: 指针光标: 手可以同时在IE FF中显示光标的手指形状，只有IE可以显示18. UL填充和边距？ ul标签默认情况下在FF中具有填充值，但在IE中，默认情况下，仅margin包含一个值，因此首先定义: ul {margin: 0; padding: 0;}，可以解决大多数问题. 19.FORM标签？在IE中，此标记将自动为某些边距提供边距，而在FF中，此边距为0. 因此，如果要显示相同的边距，最好在CSS中指定边距和填充，对于上述两个问题，问题是，我在我的CSS中通常使用这种样式ul，form {margin: 0; padding: 0;}.

20. BOX模型解释不一致？ FF和IE中BOX模型的解释不一致会导致2px的差异. 解决方案: div {margin: 30px！important; margin: 28px;}？注意这两个边距的顺序. 相反，重要属性不能被IE6识别，但是其他浏览器可以识别. 因此，在IE6中，它实际上被解释为: div {maring: 30px; margin: 28px}？重复的定义将根据最后一个定义执行. 21.浮点数的div已关闭，浮点数已清除. 例如: 此处的NOTfloatC不想继续平移，而是希望继续平移. （floatA和floatB的属性已设置为float: left;）此代码在IE中没有问题，问题出在FF. 原因是NOTfloatC不是float标签，并且必须关闭float标签. 在两个div之间添加此div必须注意位置，并且它必须与两个具有float属性的div处于同一级别，并且它们之间不能有嵌套关系，否则会发生异常. 并按如下方式定义clear的样式: .clear {clear: both;} 22. 最无情的手段-！重要吗？ Example.tabd1 {background: url（/res/images/up/tab1.gif）否-repeat 0px 0px！important;背景: url（/res/images/up/tab1.gif）不重复1px 0px;}？值得注意的是，句子xxxx！important必须放在其他句子的上方. 如果无法解决某些详细问题，则可以使用此方法. FF首先会自动分析“！important”，但IE6会忽略它. 如前所述.

23. 为什么FF下的文本不能扩展容器高度？在标准浏览器中具有固定高度值的容器不会像IE6那样展开，那么我想固定高度，但也希望能够进行扩展. 如何设置？ ？解决方法是删除高度设置min-height: 200px；这里为了照顾不知道最小高度的IE6，可以定义如下: 24. IE滚动条颜色解决方案: 将正文更改为html html {scrollbar-face-color: #f6f6f6; scrollbar-highlight-color: #fff; scrollbar-shadow-color: #eeeeee; scrollbar-3dlight-color: #eeeeee; scrollbar-arrow-color: #000; scrollbar-track-color: #fff; scrollbar-darkshadow- color: #fff;}点线和虚线在25.border中: 点线轮廓dashed: 点线轮廓的border属性中点线和虚线之间的区别: 点线在IE6下不兼容，并显示为虚线效果在浏览器中使用虚线表示时，显示一致的虚线和虚线. border: none和border: 0之间的差异有两点: 1.理论性能差异； 2.浏览器兼容性差异.

1. 性能差异: [border: 0]尽管将border设置为“ 0”时页面上的像素不可见，但根据border的默认值，浏览器仍将呈现border-width / border-color. 即，内存值已被占用. [边框: 无]将边框设置为“无”，表示否. 当浏览器解析为“ none”时，将不执行任何渲染操作，即不消耗任何内存值. 2.兼容性差异: 兼容性差异仅适用于IE6，IE7和Tab按钮以及输入. 这种现象将在win和win7的XP主题下发生. 边界为“无”时，IE6和IE7的无效边界仍然存在，如下图所示: IE6和IE7的边界为“ 0”，如下图所示: 边界为“ 0”时“或”无”，Firefox以下显示是一致的，如下图所示: 27.不同的浏览器在边距和填充方面有很大的不同. 显示差异. 显示差异. 28.无法在IE6中设置最小高度显示差异. 29. IE6中的列表项之间出现空白行. 在IE6中使用float属性将产生两倍的距离显示差异. 31.溢出边界问题的显示差异32.最小高度设置最小高度IE6不兼容的显示差异CSS跨浏览器兼容性解决方案Hack什么是Hack？ ？ CSS Hack由于不同的供应商（例如Internet，Safari，Firefox，Chrome等），或同一供应商的浏览器的不同版本（例如IE6和IE7），对CSS解析的理解并不完全相同，因此生成的页面同样，无法获得所需的页面效果.

这时，我们需要为不同的浏览器编写不同的CSS，以便它可以同时与不同的浏览器兼容，并且可以在不同的浏览器中获得所需的页面效果. ？简而言之，CSS hack的目的是使您的CSS代码与不同的浏览器兼容. 当然，我们也可以使用CSS hacks为不同版本的浏览器自定义和编写不同的CSS效果. 1.选择器Hack1，IE6（包括）版本识别语法: * html选择器{...}例如: * html.content {width: 300px;高度: 300像素； border: 1px dashed#000;}选择器Hack2. 只有IE7可以识别以下语法: * + html选择器{...}例如: * + html.content {width: 300px;高度: 300像素； border: 1px虚线#000;} 2.属性Hack1，IE6（含）以下版本识别语法: _attribute: value; 2. IE7以下的版本识别语法（包括）: + attribute: value;条件注释语法1.判断是否等于某个IE浏览器版本的语法: 语法: 例如: 条件注释语法2.确定IE浏览器的范围: gte，gt，lte，其中: gte: 表示大于或等于到特定的IE浏览器版本gt: 表示高于某个IE浏览器版本Ite: 表示低于或等于IE浏览器的版本It: 表示IE浏览器的版本语法低于某个IE浏览器的版本语法: 例如: 条件注释语法3.判断非IE浏览器语法: 待判断的内容例如: 条件注释语法4. IE浏览器语法: 例如: 更常用的CSS Hack技术！最广泛使用的是！important，它可以为IE（IE7.0可以理解！important）和非IE浏览器设置不同的样式，只要在非IE浏览器样式之后添加！important即可. <

因此，为了与IE6和Firefox之间的差异兼容，通常使用！important. 1.区分IE浏览器和非IE浏览器#tip {background: blue; background: red \ 9;} //非IE背景设置蓝色// IE6，IE7，IE8背景设置红色2.区分IE6，IE7，IE8，FF的区别符号: \ 9示例: #tip {background: blue;背景: 红色\ 9; *背景: 黑色； _background: orange;} * _ /// Firefox背景设置为蓝色// IE8背景设置为红色// IE7背景设置为黑色// IE6背景设置为橙色说明: 因为IE系列浏览器可以读取（\ 9），而IE6和IE7可以读取（*），并且IE6可以识别（_），因此您可以按顺序写下来，它将使浏览器正确读取您可以理解的CSS语法，从而可以有效地区分IE版本和非IE浏览器（ 3.区分IE6，IE7，FF（方法1）区别符号: *示例: #tip {background: blue; *背景: 黑色； _background: orange;} _ // Firefox背景设置蓝色// IE7背景设置黑色// IE6背景设置橙色描述: IE6和IE7可读（*），IE6可以读（_），但IE7不能读（_） ，对于Firefox（非IE浏览器），它根本无法识别（*）和（_），因此您可以使用此差异来区分IE6，IE7和Firefox.

4. 区分IE6，IE7，FF（方法2）的区分符号: *示例: #tip {background: blue; // Firefox背景设置为蓝色* background: 黑色！important; // IE7背景设置为黑色* background: 橙色； //橙色的IE6背景设置}！重要说明: IE7可以识别（*）和（！important），但是IE6只能读取（*），但不能读取（！important），因为Firefox可以读取（！important），但是无法识别（*），因此您可以通过此区别有效地区分IE6，IE7和Firefox. 5.区分IE7和FF符号: *示例: #tip {background: blue; // Firefox背景设置为蓝色* background: black！important; /// IE7的背景设置为黑色}！important说明: 因为Firefox可以识别（！重要），但无法识别（*），而IE7可以识别（*）和（！important），所以可以使用两个识别符号用来区分IE7和Firefox.

6. 区分IE6和IE7（方法一）: *示例: #tip {* background: blue; _background: 黑色；} _ // IE7背景设置蓝色// IE6背景设置黑色说明: 由于IE7 IE6和IE6都可以被识别（*），但是IE6可以识别（_），但是IE7无法识别. 通过IE7无法识别（_）的功能，您可以轻松地区分IE6和IE7. 7.区分IE6和IE7（方法2））区别符号: ！important示例: #tip {background: blue！important;背景: 黑色； } // IE7背景设置蓝色// IE6背景设置黑色说明: 因为IE7可以读取（！important），但IE6不能，并且CSS读取步骤是从上到下. 因此，当IE6读取它时，由于无法识别它（！重要），它直接跳到下一行以读取CSS，因此背景颜色为黑色. 关于Hack的一句话摘要: 顺序不应该混乱，因为当重复定义时，浏览器默认为最后一个渲染，因此它必须首先是正常的，然后是（*），最后是（_）. 是IE的错吗？ ？也许您一直在抱怨为什么必须为IE和FF专门编写不同的CSS，为什么IE如此头疼，然后在编写CSS的同时诅咒该讨厌的IE. 实际上，就对CSS的标准支持而言，IE不是我们想象中的关键是IE和FF的默认值不同. 掌握了这项技术之后，您会发现编写与FF和IE兼容的CSS并不是那么困难. 也许对于简单的CSS，您不需要“！important”“这件事.

是IE的问题吗？ ？我们都知道，当浏览器显示网页时，它将根据网页的CSS样式表决定如何显示它，但是我们可能不会描述样式表中的所有元素，因此当然不需要要做到这一点. ，因此对于那些未描述的属性，浏览器将使用内置的默认方法来显示，例如文本. 如果未在CSS中指定颜色，则浏览器将使用黑色或系统颜色来显示，div或其他元素. 背景（如果未在CSS中指定），则浏览器会将其设置为白色或透明，等等. 其他未定义的样式相同. 因此，很多事情在FF和IE中看起来都不同. 根本原因是它们的默认显示方式不同，以及如何显示此默认样式. 我知道W3C中没有相应的标准可以规范，所以我不能怪它. IE浏览器也. 谢谢

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