|
页面显示的BUG问题
|
解决办法
|
|
相对位置和溢出隐藏 |
为父元素增加position:relative; |
|
PNG透明 |
img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);}
|
|
:hover伪类 |
/* jQuery Script */
$('#list li').hover(
function () {
$(this).addClass('color');
},
function() {
$(this).removeClass('color');
}
);
/* CSS Style */
.color {
background-color:#f00;
}
/* HTML */
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
|
|
双倍边距bug |
div#content {
float:left;
width:200px;
margin-left:10px;
/* fix the double margin error */
display:inline;
}
|
|
IE6 幽灵文本 |
使用<!—[IF !IE]>标签包围注释
移除注释
在前浮动上增加样式 {display:inline;}
在适当的浮动的div上使用负边距
在原文本增加额外的 (比如10个空格) (hacky way)
|
|
Bicubic图像缩放 |
img { -ms-interpolation-mode: bicubic; } |
|
禁用IE默认的垂直滚动条 |
使用overflow:auto，让滚动条只在你需要时出现。
html {overflow: auto;}
|
|
IE的最小高度 |
selector {
min-height:500px;
height:auto !important;
height:500px;
}
|
|
盒模型Hack |
或者你可以用CSS Hack来解决这个问题。所有标准兼容的浏览器都能读取w\\idth:180px 除了IE5。
#content {
padding:10px;
border:1px solid;
width:200px;
w\\idth:180px;
}
|
|
IFrame透明背景 |
/* in the iframe element */
<iframe src="../../content.html" allowTransparency="true">
</iframe>
/* in the iframe docuement, in this case content.html */
body {
background-color:transparent;
}
|