巴巴唔模板网
打造最干净最齐全的div+css网页模板 网站模板 资源下载站
跨浏览器的CSS hack技术
在div+css布局的网页中，会用到许多跨浏览器的CSS HACK，以下总结了10个跨浏览器的CSS方法，供大家参考。
1.CSS跨浏览器的inline-block
在不同高度的内嵌块中，使用inline-block的效果
在不同高度的内嵌块中，使用"float"的效果
详细代码：
<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
</style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
</style>
<ul>
<li>
<div>
<h4>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>
</div>
</li>
<li>
<!-- etc ... -->
</li>
</ul>
2.CSS跨浏览器最小高度设置
selector {
min-height:500px;
height:auto !important;
height:500px;
}
min-height:500px;
height:auto !important;
height:500px;
}
3.CSS玩转图片边框
如果你想在鼠标指到图片上，给图片加一个边框很容易引起图片布局错乱的情况，现在css提供了一个非常好的属性outline，它可以让我们随意给图片加入边框而不影响布局。
内边框示例
#example-one a img, #example-one a { border: none; overflow: hidden; float: left; }
#example-one a:hover { border: 3px solid black; }
#example-one a:hover img { margin: -3px; }
#example-one a:hover { border: 3px solid black; }
#example-one a:hover img { margin: -3px; }
外边框示例
#example-two a img, #example-two a { border: none; float: left; }
#example-two a { margin: 3px; }
#example-two a:hover { outline: 3px solid black; }
#example-two a { margin: 3px; }
#example-two a:hover { outline: 3px solid black; }