css控制之浏览器兼容bug

最新推荐文章于 2024-06-18 10:02:04 发布

原创最新推荐文章于 2024-06-18 10:02:04 发布 · 528 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css浏览器兼容

本文深入探讨了IE浏览器在CSS布局中遇到的一些常见问题，包括双倍margin bug、margin bug、不识别特定CSS属性等，并提供了针对性的解决策略。文章还讨论了如何解决IE对宽度和高度的误解，以及如何避免复杂的布局问题，如内容隐藏现象。通过详细的实例解释和代码示例，旨在帮助开发者理解并解决在IE中遇到的布局挑战。

ie之双倍margin值bug，，在当前样式中声明，_display:inline，此样式只在ie中起到效果，margin值即消失。
ie之不认识a:link，即a:link{color:red}无效果，可以直接写成a{color:red}和a:like{}具有相同意义。
ie之3像素marginbug，即连续定义两个div（id=text1），div{id=text2},第一个div定义float:left后，第二个div不定义float的是时候两者之间会有3px的间距，正确写法第二个div下也定义floa:left,两者就不会有3px间距。靠在一起。
IE与宽度和高度的问题

IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
页面的最小宽度min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度
IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
未完待续