二、让IE6支持PNG透明
一个IE6的Bug引起了大麻烦, 他不支持透明的PNG图片。
你需要使用一个css滤镜
| *html #image-style { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil ename.png", sizingMethod="scale"); } |
三、移除超链接的虚线
FireFox下,当你点击一个超链接时会在外围出现一个虚线轮廓. 这很容易解决, 只需要在标签样式中加入：
| outline:none. a{ outline: none; } |
四、给行内元素定义宽度
如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括：<span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素。
span { width: 150px; display: block }
五、让固定宽度的页面居中
为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.
| #wrapper { margin: auto; position: relative; } |
六、IE6双倍边距的bug
给此对象加上display:inline即可解决问题。
IE6.0环境中双倍边距BUG。先看下面的CSS代码。
| div { float:left; margin-left:10px; width:420px; height:150px; border:1px solid red } |
这样设置以后。本来左边距设置为10px，但IE6.0解释为20px，这是一个比较头疼的问题。但解决也非常简单。办法就是是加上display:inline。就搞定了。看下面的示例对比！
双陪边距的效果：
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>52css.com</title> <style type="text/css"> body { margin:0 } div { float:left; margin-left:10px; width:420px; height:150px; border:1px solid red } </style> </head> <body> <div> Div+CSS XHTML XML 教程大全 - 52css.com<br />Div+CSS XHTML XML 教程大全 <br />Div+CSS XHTML XML 教程大全 <br />Div+CSS XHTML XML 教程大全 <br />Div+CSS XHTML XML 教程大全 <br />Div+CSS XHTML XML 教程大全 <br />Div+CSS XHTML XML 教程大全 <br /></a> </div> </body> </html> |
解决BUG以后的效果：
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>52css.com</title> <style type="text/css"> body { margin:0 } div { float:left; margin-left:10px; display:inline; width:420px; height:150px; border:1px solid red } </style> </head> <body> <div> Div+CSS XHTML XML 教程大全 - 52css.com<br />Div+CSS XHTML XML 教程大全 <br />Div+CSS XHTML XML 教程大全 <br />Div+CSS XHTML XML 教程大全 <br />Div+CSS XHTML XML 教程大全 <br />Div+CSS XHTML XML 教程大全 <br />Div+CSS XHTML XML 教程大全 <br /></a> </div> </body> </html> |
