有的时候编写的CSS样式没有什么错误,但在浏览器中却会出现一些很奇怪的问题,明明没有间距的地方出现了间距,没有空隙的地方多了一条白线,或者IE、Firefox下显示的效果截然不同,这些都与使用CSS Hack的原因相同。下面列举几个在工作中经常会用到的样式属性所存在的问题及解决方案。
(1)inline-block的兼容与4px空隙问题
在实际工作中,我们经常会用到“inline-block”(内联块)这个属性来代替“float”来使内容横向排列,而不产生浮动。但在IE6、IE7下并不能很好地支持该属性,即使支持这个属性的Firefox中依旧会产生4px的空白间隙。例如,我们需要制作一组横向导航菜单,代码如下
使用“inline-block”属性制作的横向菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul li{list-style-type: none;margin: 0;padding: 0;border: 0;}
li{background-color: #ccc;display: inline-block;width: 100px;height: 30px;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
li标签使用了“inline-block”触发layout,形成行布局,但IE7下的显示依旧是纵向排列,Firefox下则出现了间距,即使li上并没有margin和border属性的设置,如下图所示。
Firefox浏览器下inline-block属性会产生间隔
想解决上面的问题,代码如下:
ul{font-size: 0;}
li{font-size: 12px;background-color: #ccc;vertical-align: top;display: inline-block;*display: inline/*IE7*/;width: 100px;height: 30px;*zoom: 1/*IE7*/;}
父级ul添加了“font-size:0”、子级li添加“font-size:12px”来设置字体大小;“vertical-align:top”垂直居上对齐,解决内联块之间的空隙问题;“*display:inline/*IE7*/;*zoom:1/*IE7*/;“触发IE7下Layout并定义块为内联,这时,在所有浏览器下都能很好地兼容”display:inline-block“了,如下图所示。
Firefox浏览器兼容正常显示效果
(2)margin-top、margin-bottom的重叠
当相邻的两个盒模型具有margin-top和margin-bottom属性时,浏览器会取其中大的值作为间距,代码如下
相邻的布局块具有margin-top和margin-bottom属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: #ccc;width:100px;height: 30px;margin-bottom: 15px;">1</div>
<div style="background-color: #ccc;width:100px;height: 30px;margin-top: 20px;">2</div>
</body>
</html>
这时块1与块2之间并不是15px和20px相加的间隔值,而是只取了块2的”margin-top:20px“,因此可以改用padding来做间隔或只设定两个块其中之一的margin属性,还可以给它们之间加一个具有”clear:both“属性的DIV做分割。
(3)图片同比例缩放,DIV内水平垂直居中
如果块内只有单行的文字,那么实现水平和垂直方向上都居中很简单,代码如下
单纯文字内容在DIV中水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="line-height: 200px;background-color: #eee;text-align: center;width: 200px;height: 200px;margin-bottom: 15px;">文字居中</div>
</body>
</html>
但如果内容是一组图片且大小未知,宽和高都不一样该如何实现水平和垂直方向上都剧中呢?代码如下
未知大小图片同比例缩放后水平和垂直方向上居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding: 0;margin: 0;}
html{min-height: 101%;}
body{font-family: verdana,arial,tahoma;font-size: 12px;color: #333;}
div{margin: 0 auto;}
ul,ol,li{list-style: none;}
a{text-decoration: none;word-wrap: break-word;}
a:hover{text-decoration: underline;}
img{border:0;}
p{line-height: 26px;}
/*容器*/
.middle{font-size: 0;width: 880px;height: 218px;margin: 10px auto;border: solid 4px #999;}
.middle li{font-size: 12px;height: 200px;background-color: #f5f5f5;display: inline-block;*display: inline/*IE7*/;margin: 1%;width: 23%;*zoom: 1/*IE7*/;}
/*未知大小的图片在已知容器中的垂直居中和水平居中*/
.middle li img{margin-top: expression(100-this.height/2);max-width: 200px;max-height: 200px;}
.middle li a{text-align: center;vertical-align: middle;display: table-cell;width: 200px;height: 200px;overflow: hidden;}
</style>
</head>
<body>
<ul class="middle in-box">
<li><a href="javascript:void(0)"><img src="img/cool.png"/></a></li>
<li><a href="javascript:void(0)"><img src="img/130-81.png"/></a></li>
<li><a href="javascript:void(0)"><img src="img/banner/j2.jpg"/></a></li>
<li><a href="javascript:void(0)"><img src="games/image/egg_1.png"/></a></li>
</ul>
</body>
</html>
实现效果如下图所示,在商城商品图片列表中经常会遇到这样的问题,应特别注意。