容我织梦

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 错误的使用这个值 /*
}

全文阅读 »

在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等不一致。
在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起，而其他则从层的真实位置算起，而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。
这里就不截图了，具体可以看本文底部链接是前段大牛，码头的博客地址！
目前解决办法，使用csshack,_left针对ie6进行重设。

由 愚人码头 撰写 　http://www.css88.com/archives/1584

关于CSS优先级的问题，是一些同学的难题，其实这也是入门级的知识。

在http://www.cssforest.org/faq/topic/view/19.html这里仔细看了博主写的内容。确实分析的很好，但是个人觉得写得有点乱，而且简单的问题说的复杂了。大家可以看http://www.sonyes.cn/article/css/123.htm这里有更简单的方法，也更明了一些。

一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。
p的特性是1（一个html选择器）
div p的特性是2（两个html选择器）
.tree的特性是10（1个class选择器）
div p.tree的特性是1+1+10=12，（两个html选择器，一个class选择器）
#baobab的特性是100（1个ID选择器）
body #content .alternative p的特性是112（两个html选择器，一个ID选择器，一个类选择器）
按照上面的规则，div p.tree的特性比div p高，body #content .alternative p又比它们两个都高。

全文阅读 »

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

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

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

在浏览器里，鼠标点击时有虚线框，很影响美观。这里我们把它去掉，不说教，看代码！

[code] [/code]
把这个文件另存为***.htc即可。
HTML代码：

www.sonyes.cn

CSS样式：
[code]a {
　　display:block; 　　
width:120px;
　　height:60px;
　　line-height:60px;
　　text-align:center;
}
a:hover {
　　background:#eee
}[/code]

在a标签的样式内加入一条，消除链接的虚线边框：

[code]a {
　　display:block;
　　width:100px;
　　height:30px;
　　line-height:30px;
　　text-align:center;
　　behavior:url(line.htc);
}[/code]

网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI 编码，并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的，然而当 CSS 文件中包含有中文注释时就可能不尽如人意了！估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析，所以才会发生 CSS 在 IE6 下不起作用的情况。看来微软已注意到这个问题，在 IE7 中把它修复了。但是用 　　　IE6 的人还是不少。因此这个问题需要解决：
　　方法一：把 CSS、JS 和网页文件都统一保存为 UTF-8 格式。
　　方法二：去掉 CSS、JS 中的中文注释，或者改为英文。
　　上文为IE6因为编码问题无法正确解析CSS文件

　　有时候我们发现我们写的html页面引用外部css文件的时候在IE7和FF中能够很好的被解析，即能正常显示，可在IE6中却完全没有被解析，即css文件里的样式根本没应用到我们的html页面，这是怎么回事？开始我把css文件里头的所有样式都复制粘贴到html页面中的

中，这样做以后，IE6、IE7、FF都能正常显示了，这也就说明外部的css文件应该是存在什么问题了，为什么在IE6中出现这问题，而在IE7和FF中却没有？网上google了下，发现是IE6中对页面的编码有严格的要求，我查看了下，朋友发过来的css文件用的编码是GB2312的，而html文件用的是utf-8的，原来问题就出在这里了，我把css文件内容的编码用ed改成utf-8，再次测试的时候，一切恢复正常了，还有就是我发现朋友的css文件里面用中文注释，严重建议朋友们不要在css文件里面用中文来注释，这样也会引起编码的问题。

其实这个问题向我相信很多朋友都遇到过，也曾经和同事谈论过这个问题。今天在52CSS上也看到了这个，所以我就直接转了过来，也已经1点多了。懒得再打字了，问题说清楚就可以了，不是么？呵呵

CSS的兼容性问题一直令CSSer头疼，最小高度min-height是一个非常有用的属性，在页面布局中的很多地方可以用到。在52CSS.com的一些实例布局中也有涉及。

　　当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。
　　min-height属性并非所有浏览器都兼容，主要问题还是出现在IE6，这个不支持标准的浏览器偏偏占据很大的用户群体，虽然IE7发布很久了，IE8正式版也快发布了，但IE6依然有着众多的用户。实在让CSSer非常无奈。
　E6对于overflow的特殊实现，给我们实现min-height提供了一个思路，所以产生了以下兼容IE6、IE7、FF浏览器的min-height写法：

#mrjin {
background:#ccc;
min-height:100px;
height:auto !important;
height:100px;
overflow:visible;
}

　我们查看最终的运行效果，您可以编辑内容后再运行，以便查看内容少与内容多时出现的变化。

记得上次有个群里的问一个问题就是，IE6下PNG背景透明链接就失效了。自己也碰到这个问题，经测试，如此[smile]又捡到一颗豆。。。
今天虾头又有此问题发生，哈哈，想着刚好用上这个…很三俗的想法[redface]，结果虾头那里传来消息，说不行，索性要了他的源码。经证实确实不行，郁闷了一会[sad]不行就不行吧，自己研究下，最后终于完美解决了这个问题[handclap]

最终效果如下，实为IE6下鼠标经过影像

虾头的XHTML代码为：
[code]

[/code]

CSS样式：
[code]
#banner{background:url(../images/banner.jpg) no-repeat center top;font-weight:bold;padding-left:160px;color:#fff;height:100px;line-height:100px;font-size:35px;font-family:黑体;}

#fenlei{ background:url(../images/img3.png) no-repeat;width:239px;height:259px;padding:12px; position: absolute;right:23px;top:72px;}
* html #fenlei{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,SizingMethod=crop, src="images/img3.png");background:none;}
#fenlei ul{padding-top:40px;position: absolute;z-index:100}
#fenlei li{line-height:25px;list-style-type:disc;list-style-position:outside;margin-left:15px}
#fenlei li a{border-bottom:1px dashed #000;}
#fenlei span{text-align:right;display:block;line-height:20px}
[/code]
虾头，不要怪我啊，哈哈[tea]

由于时间的关系我就不上传运行代码的实例了，这里给出我我的解决办法。大致思路就是把UL 和外层的容器都用绝对定位，而外层容器不要包含UL，使其能够重合（是不是用词不当），然后给ul设置Z轴。

XHTML代码：
[code]

• [热烈祝贺]本博客域名sonyes.cn
• [公告]本博客域名sonyes.cn
• [热烈祝贺]本博客域名sonyes.cn
• [热烈祝贺]本博客域名sonyes.cn
• [热烈祝贺]本博客域名sonyes.cn
• [公告]本博客域名sonyes.cn
• [公告]本博客域名sonyes.cn

更多>>

[/code]
CSS样式：

[code]
#fenlei{ background:url(../images/img3.png) no-repeat;width:239px;height:259px;padding:12px; position: absolute;right:23px;top:72px;}
* html #fenlei{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,SizingMethod=crop, src="images/img3.png");background:none;}
ul#dd {padding-top:40px;position: absolute;right:40px;top:90px;z-index:1000; width:210px;}
ul#dd li {line-height:25px;list-style-type:disc;list-style-position:outside;margin-left:15px}
ul#dd li a{border-bottom:1px dashed #000; text-decoration:none;}
ul#dd li a:hover { color:#fff; text-decoration: underline; font-style:normal;}
#dd span{text-align:right;display:block;line-height:20px}
[/code]

提示：图片地址自行更改，如果还有问题，请与左侧QQ在线联系我。转载请注明出处[idea]

半透明效果有时候会给页面增加不少色彩，特别是Vista盛行之后，半透明效果更加受推崇。在诸多可用于Web浏览的图片格式中，只有PNG格式和Gif格式可以实现半透明效果，不过Gif格式的半透明效果很有限，而且会大范围失真，所以目前最流行的方式就是使用PNG格式图片。不过可惜的是，在Internet Explorer 6及以下版本中都不支持PNG半透明效果（至少是不直接支持）。不过幸好Microsoft在这些浏览器中内置了其他的功能，可以帮助我们来实这种半透明的效果。

一、我们看一下普通情况下在现代浏览器中半透明效果的实现
首先要有一张半透明的PNG格式图片，这个制作很简单，在Photoshop中新建一个文件，在该文件中新建一个图层填充白色，然后调节透明度，删除背景，保存为PNG格式即可。你也可以 下载这个PNG文件使用。我们要做的工作很简单：只要把这个PNG图片指定为某个

的背景即可。例如可以使用下面的CSS规则：
[code]
body {
background:black url(bg.jpg) no-repeat 0 0;
text-align:center;
}
div {
width:80%;
margin:0 auto;
text-align:left;
padding:7px;
background-image:url(tran.png);
border:3px solid #fff;
}
[/code]

二、在Internet Explorer 6中的实现
Internet Explorer中提供了提供了独有的滤镜效果，他通过filter:progid:DXImageTransform.Microsoft.AlphaImageLoader实现，现在是关于这个属性的有关知识：
[code]
enabled :　 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
true | false true :　 默认值。滤镜激活。
false :　 滤镜被禁止。

sizingMethod :　 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop :　 剪切图片以适应对象尺寸。
image :　 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale :　 缩放图片以适应对象的尺寸边界。
src :　 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

特性：
Enabled :　 可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod :　 可读写。字符串(String)。参阅 sizingMethod 属性。
src :　 可读写。字符串(String)。参阅 src 属性。

说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
[/code]

因此在Internet Explorer 6 中我们还要加上现在这段话:

[code]
* html div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="tran.png");
background:none;
}
[/code]

注意：这里我们使用了 “*”的CSS hack，这个CSS Hack是Internet Explorer 6独有的，在Ineternet Explorer 6的DOM结构中，默认HTML的父节点为*，而在标准的DOM结构中HTML就是根节点。所以上面的CSS 规则只有Internet Explorer 6 认识。

这样，我们在Internet Explorer 6、7、Firefox、Opera等最常用的浏览器的都实现了半透明效果了。

三、其它情况
但是上面都用PNG做背景的情况，有时候我们还会用PNG来做遮罩，比如下面这张Logo图片，

我们可以使用PNG遮罩来达到渐变效果：

那么我们可以使用下面的方法来实现
HTML代码段

[code]

[/code]

注意：这种写法完全是为了迎合Internet Explorer 6，

容器用来帮助内部元素定位，用来覆盖在标签的上面达到半透明效果。下面我们只需要设定一下它们的位置就好了：

[code]
div { position:relative;}
span {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='filter.png');
float:left;
width:200px;
height:100px;
position:absolute;
top:0;
left:0;
}
[/code]

不过，在Firefox中并没有filter这个属性，因此我们需要单独为Firefox中定制一个样式：

[code]
div > span {
background:url(filter.png);
}
[/code]

这样我们就可以使用遮罩来实现半透明效果了

不过如果有太多的地方需要实现这样的遮罩效果的话，上面的处理方式还不是最好的，首先它有冗余的HTML标签，此外还使用了绝对定位和相对定位。如果我们把上面的代码进行封闭效果会更佳。这里我们可以使用下面这段JS代码进行封闭
[code]

[/code]

这段代码只在Internet Explorer 6中才会被运行。
下面我们可以像在Internet Explorer 7 和Firefox中一样写代码：

[code]

[/code]

[code]
div {
background:url(logo.jpg) no-repeat;
}
[/code]
解决了PNG跨浏览器的问题之后，我们可以利用它来实现更加复杂和更加绚丽的页面效果。

参考：http://joomla.linkster.be/new/index.php?option=com_content&view=article&id=61:transparency-in-internet-explorer-6&catid=35:articles&Itemid=55

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

2, IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">
二、万能 float 闭合

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

三、其他兼容技巧

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题
主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

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;}

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个