<![CDATA[蜗爱CSS - Hack]]> http://www.woaicss.com/ zh-cn PBlog2 v2.4 蜗爱CSS http://www.woaicss.com/images/logos.gif http://www.woaicss.com/ 蜗爱CSS http://www.woaicss.com/article/hack/hackk.htm <![CDATA[IE6兼容问题汇总]]> wo-ai-niqq@163.com(woniu) Fri,11 Jun 2010 14:47:42 +0800 http://www.woaicss.com/default.asp?id=198
<!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]-->

<!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]-->

<!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本（不包含IE6）。 <![endif]-->

<!--[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]-->

<!--在 IE6及IE6以下版本中加载css-->

<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->
缺点是在IE浏览器下可能会增加额外的HTTP请求数。

2、CSS选择器区分

IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。

/* IE6 专用 */

.content {color:red;}

/* 其他浏览器 */

div>p .content {color:blue;} -->
3、PNG半透明图片的问题

虽然可以通过JS等方式解决，但依然存在载入速度等问题，所以，这个在设计上能避免还是尽量避免为好。以达到网站最大优化。

4、IE6下的圆角

IE6不支持CSS3的圆角属性，性价比最高的解决方法就是用图片圆角来替代，或者放弃IE6的圆角。

5、IE6背景闪烁

如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：

document.execCommand("BackgroundImageCache",false,true);
6、最小高度

IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。

#container {min-height:200px; height:auto !important; height:200px;}
7、最大高度

//直接使用ID来改变元素的最大高度
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";

//写成函数来运行
function setMaxHeight(elementId, height){
var container = document.getElementById(elementId);
container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
}

//函数示例
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);
8、100% 高度

在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。

9、最小宽度

同max-height和max-width一样，IE6也不支持min-width。

//直接使用ID来改变元素的最小宽度
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";

//写成函数来运行
function setMinWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
}

//函数示例
setMinWidth('container1', 200);
setMinWidth('container2', 500);
10、最大宽度

//直接使用ID来改变元素的最大宽度
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

//写成函数来运行
function setMaxWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
}

//函数示例
setMaxWidth('container1', 200);
setMaxWidth('container2', 500);
11、双边距Bug

当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。个人觉得较好解决方法是避免float和margin同时使用。

12、清除浮动

如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。

#container {border:1px solid #333; overflow:auto; height:100%;}
#floated1 {float:left; height:300px; width:200px; background:#00F;}
#floated2 {float:right; height:400px; width:200px; background:#F0F;}
更多：http://www.twinsenliang.net/skill/20090413.html

13、浮动层错位

当内容超出外包容器定义的宽度时，在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。

浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;或overflow:scroll;来修正， 但hidden容易导致其他一些问题，scroll会破坏设计；JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发 生，使用一个固定的布局或者控制好内容的宽度（给内层加width）。

14、躲猫猫bug

在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。

解决方法很简单：
1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

15、绝对定位元素的1像素间距bug

IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

16、3像素间距bug

在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。
给浮动层添加 display:inline 和 -3px 负值margin
给中间的内容层定义 margin-right 以纠正-3px

17、IE下z-index的bug

在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。

18、Overflow Bug

在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。

19、横向列表宽度bug

如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>（或其他）触发了 hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给<a>定义同样的float:left;即可。

20、列表阶梯bug

列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发，我们本意是要做一个横向的列表(通常 是导航栏)，但IE却可能呈现出垂直的或者阶梯状。解决办法就是给<li>定义float:left;而非子元素<a>，或者 给<li>定义display:inline;也可以解决。

21、垂直列表间隙bug

当我们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。

解决方法：把<a>flaot并且清除float来解决这个问题；另外一个办法就是触发<a>的hasLayout（如定 义高宽、使用zoom:1;）；也可以给<li> 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。

22、IE6中的:hover

在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。

23、IE6调整窗口大小的 Bug

当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：给body定义position:relative;就行了。

24、文本重复Bug

在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加display:inline;。
]]> http://www.woaicss.com/article/hack/jiaodian.htm <![CDATA[去掉焦点虚线]]> wo-ai-niqq@163.com(woniu) Mon,10 May 2010 14:56:55 +0800 http://www.woaicss.com/default.asp?id=189 一 在<a>标签中加入onFocus="this.blur()"语句：

<a href="#" onFocus="this.blur()">try</a>
方法笨，但是好使，兼容ie,ff。

二 在<a>标签中加入hidefocus：

<a href="###" hidefocus>link</a>
ff下不起作用。

三 如果连接太多，可以用外部链接 .HTC 文件。
如，blur.htc 文件内容如下：

<public:attach event="onfocus" onevent="makeblur()"/>
<script language="javascript">
function makeblur(){
this.blur();
}
</script>

在 CSS 中加入如下代码：
A { behavior:url(blur.htc); }
ff下不起作用。

四 使用CSS样式，可加入代码：

a {blr:e­xpression(this.onFocus=this.blur())}
ff不起作用

第一种方法虽然起作用，但是如果一个页面很多链接就很麻烦了，理想的办法：
在第四种的基础上 加个a{outline:none;}]]> http://www.woaicss.com/article/hack/hack20.htm <![CDATA[IE下li下面空隙问题]]> wo-ai-niqq@163.com(woniu) Mon,01 Mar 2010 22:33:53 +0800 http://www.woaicss.com/default.asp?id=179
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


需要说明的是，包含浮动元素才会有此bug，上面的span去掉float，运行就不会有。解决办法，让li也浮动。]]> http://www.woaicss.com/article/hack/hack13.htm <![CDATA[IE6下部分样式不起作用]]> wo-ai-niqq@163.com(woniu) Tue,26 Jan 2010 17:50:30 +0800 http://www.woaicss.com/default.asp?id=174
  1.样式文件编码没写
  2.样式文件中的中文注释

当然这两种情况自己没遇到过。]]> http://www.woaicss.com/article/hack/css60.htm <![CDATA[CSS浏览器常见兼容问题汇总]]> wo-ai-niqq@163.com(woniu) Tue,15 Dec 2009 19:26:19 +0800 http://www.woaicss.com/default.asp?id=153 div类
1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto

2. 高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;
但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3. clear:both;
不想受到float浮动的，就在div中写入clear:both;

4. IE浮动 margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5. padding 问题
FF设置 padding 后，div会增加 height 和 width，但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）
高度控制恰当，或尝试使用 height:100%;
宽度减少使用 padding
但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义

6. div嵌套时 y 轴上 padding 和 marign 的问题
FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面

7. padding，marign，height，width 的傻瓜式解决技巧
注意是技巧，不是方法：
写好标准头
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div
宽尽量用margin，慎用padding，width算准实际要的减去padding

列表类

1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}

2. ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}

显示类

1. display:block,inline 两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block 块元素，元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子

2. 鼠标手指状显示
全部用标准的写法 cursor: pointer;

背景、图片类

1. background 显示问题
全部注意补齐 width，height 属性

2. 背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面

源文：http://bbs.blueidea.com/thread-2941700-1-2.html
]]> http://www.woaicss.com/article/hack/hack10.htm <![CDATA[IE下<li>元素产生间距的BUG]]> wo-ai-niqq@163.com(woniu) Wed,02 Dec 2009 20:16:57 +0800 http://www.woaicss.com/default.asp?id=144
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


解决方法：li设置css vertical-align: bottom;

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


  上边的方法一般都会解决问题，但是许多时候许多未知的原因，还会导致间距问题的出现。试试以下方法：
1.定义行高 line-height
2.设置隐藏 overflow:hidden
3.li增加浮动属性 float
]]> http://www.woaicss.com/article/hack/hack12.htm <![CDATA[Firefox下margin-top问题]]> wo-ai-niqq@163.com(woniu) Fri,27 Nov 2009 14:39:11 +0800 http://www.woaicss.com/default.asp?id=142


   长出现两种情况

  （一）margin-top失效  
   先看下面代码：
程序代码 Example Source Code

<div>
<div class="box1" >float:left</div>
<div class="box2">clear:both; margin-top:20px;</div>
</div>

  两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距 margin-top没有效果。
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


  网上能找到的两种比较靠谱的解释：1：“在css2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”2：当第一个层浮动，而第二个没浮动层的margin会被压缩，详见--浮动元素后非浮动元素的margin的处理（地址）。

得到解决问题思路：要浮动一起浮动，要就一起不浮动。

解决办法：

1.box2增加float属性
2.box1与box2之间增加一层"<div style="clear:both;"></div>"

  （二）子元素设置margin-top作用于父容器

程序代码 Example Source Code

<div class="box" style="height:100px;background:red;">
  <div class="box2">clear:both; margin-top:20px;height:50px;width:500px;background:#000;</div>
</div>

当给box2设置margin-top时，在FF下仅作用于父容器。
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


解决办法：

1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top

自己工作中遇到的总结，可能会有不严谨的地方，如有发现希望指出！

本文原创--转载注明出处！http://www.woaicss.com
]]> http://www.woaicss.com/article/hack/hack10.htm <![CDATA[再谈IE6下png不透明问题]]> wo-ai-niqq@163.com(woniu) Wed,11 Nov 2009 09:26:19 +0800 http://www.woaicss.com/default.asp?id=136 《解决PNG图片在IE6下背景不透明的问题》用的滤镜，好处是不用js，坏处是每个png图片都要写一遍滤镜样式而且不能平铺。蓝色上看到的yuanyun翻译的《Unit PNG Fix 》，下次试试这种方法。
-----------------------------------------------------------------------------------------------------
咳! 哎! 咳! 哎!.....    "

你听见了么? 这些都是大家抱怨IE6下不能实现png图片漂亮的明效果的哀叫声,的确是非常无奈.....

不过现在很幸运的是,我们能够让这一切的抱怨都停止.

网络上解决IE6 Png透明解决方案有很多,
例如 IE PNG Fix from TwinHelix, Javascript IE PNG Fix, Transparent PNGs in Internet Explorer 6 from 24 ways.等等.

然而现在,我要和你分享的是 Unit PNG Fix .



因为它的确是太出众了。

1.非常小的javascript文件:1kb!
2.解决因为IE的滤镜属性所带来的影响.
3.无论是img元素或background-image属性,都能有效果.
4.在加载页面之前就能自动运行.或者就一丁点的元素.
5.允许自动高宽.
6.使用起来超级简单.


如何使用:

1).下载文件 下载zip
然后,添加下面的代码到你页面的头部.(一定要确保路径的正确)

<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

2).添加clear.gif到你的images 文件夹中.在js文件中,修改"var clear="images/clear.gif" 路径,为你存放clear.gif的文件路径.


3). 你的整个项目的png图片都实现了透明效果.的确非常简单吧?就2个步骤,就实现了整个站点所有png的透明效果.


一些注意事项:

Unit PNG Fix能够让 background-repeat在ie6下工作,
不过这种工作方式不是像正常的repeat图片重复的效果,而是采用了拉伸的效果.
但是,仍然是有效果的,所以这也是非常不错的.因为没有任何一个解决方案能够实现ie6下透明滤镜重复图片这个功能.

就这些了,现在你可以开始动手实践了.

阅读英文原文
]]> http://www.woaicss.com/article/hack/css34.htm <![CDATA[包括IE8的浏览器兼容hack汇总]]> wo-ai-niqq@163.com(woniu) Tue,13 Oct 2009 09:06:13 +0800 http://www.woaicss.com/default.asp?id=118
程序代码 Example Source Code

#box{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}

]]> http://www.woaicss.com/article/hack/css28.htm <![CDATA[firefox背景水平不平铺]]> wo-ai-niqq@163.com(woniu) Tue,29 Sep 2009 16:31:57 +0800 http://www.woaicss.com/default.asp?id=112 垂直平铺同样。
注：overflow:auto;有清除浮动的作用。见文：http://www.css88.com/archives/543]]>