容我织梦

1. 设置position: relative

将一个元素设置为”position:relative”可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。

2.将浮动元素设置为display:inline

具有margin属性的浮动元素可能引起的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，当然，方法也不是只有这一个。

3. 将一个元素设置为hasLayout

很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果。

最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实 际尺寸，但是问题是这是不现实的，你可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候 hasLayout已经被启用。

4. 修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

• 确保所有的元素使用”display:inline;”
• 在最后一个元素上使用一个”margin-right:-3px;”
• 为浮动元素的最后一个条目使用一个条件注释，比如：

  1	<!--[if !IE]>Put your commentary in here...<![endif]-->

• 在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

5. 使用!important 或高级选择器来区分IE6

不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：

1
2
3
4
5

#element {
 min-height: 20em;
 height: auto !important; /* 所有浏览器都理解这段代码 */
 height: 20em; /* IE6 错误的使用这个值 /*
}

全文阅读 »

在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。

设置父对象的文字大小为0px
即，在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

改变父对象的属性
如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码：“width:88px;height:31px;overflow:hidden;”。
全文阅读 »