网页设计教程：how to 提高砌页面的效率

要回答这个问题，我想先举一个实际的例子来。如果让你去做一个按钮，按钮里面的文字是图片字，并且要水平和垂直居中，按钮要包含相应的网页字，以便让搜索引擎检索，鼠标移上去后要改变鼠标样式为手指形状，按钮被假设会出现多次，因此图片文字要求使用CSS Sprite。

一般我们都会先这样做，

12px像素

首先，在Firefox看一下，不错呀!符合要求了 ，然后就顺便看一下Chrome，Safari，Opera，都没有问题了，

好了，又到测试IE了，IE9，IE8，没问题，IE7，一看，问题来了，效果如下

啥都没有，我的图片字都去哪了?

--这就是浏览器兼容性问题。快下班了，如何解决呢?于是我随便试了一下，我尝试一下改变一下原来的布局思路，我让图片字设置左浮动，看一下，

好啊，图片字终于出来了，心还是定了一下，但是因此又引发了另外一个问题，稍微细心的人都能看出图片字既没有水平居中又没有垂直居中，oh，此时想到了margin，而margin也要做hack，上下外边距 = (button高度-图片字高度)/2 = (50-12)/2 = 19，左右外边距 (button宽度-图片字宽度)/2 = (200-73)/2 = 63.5，so，要设置*margin:19px 63px;

.button .txt{ 
 
vertical-align:middle; /*1*/ 
 
display:inline-block; /*2*/ 
 
text-indent:-9999px; 
 
background:url(images/png24.png) no-repeat; 
 
*float:left; 
 
} 
 
.button .txt1{ 
 
width:73px; 
 
height:12px; 
 
background-position:0 -19px;/*1*/ 
 
*margin:19px 63px 
 
} 

再看一下先，哈哈，自我感觉挺好，起码IE7已经做得跟layout一致了，但是大家都知道，你做的网站会只有一个按钮吗，It‘s importsible，需要用到CSS Sprite的图片字，icon遍布整个站点，于是苦逼的事来了，每个图片字都重复着无数个"上下外边距 = (button高度-图片字高度)/2"这样的公式，在某些时候你会发觉你会已然为一个埋头苦按数字键的会计仔，而不只是页面仔，所以到了最后，加班到9点了，你不下班，公司等着关门的，于是你只能随便目测外边距了，这肯定在对齐度上存在不准确性，这就解析了做页面效率低下，效果差，这么认真按计算器也没把事干好，这是吃力不讨好，活受罪。好，知道这样做不爽，我以后该如何做呢?

首先来分析一下绕圈子的原因，就是没搞清楚为什么IE7下会显示不了图片字的原因，我建议先尝试总结下解决它的途径，再尝试找出其规律并暴露其弊病根源。

通过测试，这个bug可以有几个解决方案，IE6我先搁置一下，先解决好IE7+的兼容性问题，再回头解决它：

第一个：就是为.button .txt设置浮动，其活受罪程度在上面已经阐述。此时，你要思考浮动为何会解决到这个问题的，众所周知浮动会让父元素高度塌陷，但显然这里不是，因为.button元素已经写死了高度了，除了这个，你也许还会想到浮动能还能让元素宽度、高度shrink-to-fit，这个显然是针对块级元素(该特征超出本文讨论范围，了解更多点击这里)，再想一下，浮动还能让触发元素hasLayout特性，说白就是让非块级元素当块级元素一样设置盒模型，但IE7是支持display:inline-block的，所以用不着浮动元素来帮忙做这事，因此到此为止暂时还不能分析出IE7为何会产生这个bug，请不要泄气，你还是有收获的，至少你已经知道浮动不是通过这些特性来解决这个bug的，这能帮助你将专注度从上面这些方向中解放出来。

第二个： 我开始尝试猜测是否text-indent在闹别扭，虽然从规范上讲，该属性只是将文本进行缩进，但要知道世界上很多东西都不是按规范来做的，骨灰级版本的IE是其中的佼佼者，所以尽管大胆假设并测试之，将.button .txt的text-indent:-9999px;注析掉，在IE7下果然显示了图片字，

从这一点可以大胆断言在IE7有一个癖好，当内联元素和inline-block化的元素被设置了text-indent属性以后，IE7会将背景连同文字一并缩进，因此我们设置的图片字也随之被隐藏了。知道了这个之后，我们再来回答为什么之前设置浮动能让图片字显示出来的原因就不难了，是浮动让.button .txt让.button .txt的text-indent失效了的缘故!

好，思考到这里，我们要明确一下下一步将要解决什么问题，我们知道设置缩进文字达到隐藏文字的做法是业界常用的做法，现在发现了这个副作用之后，若要弃用它或改用其他方式来实现，其实无可厚非，但公司已使用多年，开发规范都统一了，要改可能也不是说改就改，因此text-indent我还是保留了下来，然后现在需要解决的问题变为如何让IE7的将背景连同文字一并缩进的bug解决之。我的方案有一个。

解决方案：我会改变一下html结构， 在图片字元素前加一个空字符。(其实你还可以加一个空内联标签，如，这个会在解决IE6兼容性问题时提出)

12px像素

这样改之后，效果如下：

这个改动会有一个两个副作用，第一个，空字符下出现了a标签默认下划线样式，第二个，空字符与图片字一并水平居中，导致图片字会稍微倾向整个按钮的右侧，具体的偏移值就是空字符 的宽度，这个宽度一般为4px。解决第一个副作用，只需将a标签默认的下划线样式取消掉就ok了，第二个副作用，我将图片字设置-4px的左外边距，这样就能抵消空字符多出的宽度。于是有了一下的新样式：

/* 
 
* 1.使图片字水平居中 
 
* 2.让图片字垂直居中 
 
* 3.让a标签inline-block化,让width,height(盒模型属性)起作用 
 
* 4.取消 下的下划线 
 
*/ 
 
.button{ 
 
text-align:center; /*1*/ 
 
width:200px; 
 
height:50px; 
 
line-height:50px; /*2*/ 
 
display:inline-block; /*3*/ 
 
background:#000; 
 
text-decoration:none; /*4*/ 
 
} 
 
/* 
 
* 1.在父容器line-height里面垂直居中 
 
* 2.让a标签inline-block化,让text-indent起作用 
 
* 3.抵消空字符造成的多余宽度 
 
*/ 
 
.button .txt{ 
 
vertical-align:middle; /*1*/ 
 
display:inline-block; /*2*/ 
 
text-indent:-9999px; 
 
background:url(images/png24.png) repeat ; 
 
margin-left:-4px; /*3*/ 
 
} 
 
.button .txt1{ 
 
width:73px; 
 
height:12px; 
 
background-position:0 -19px; 
 
} 

思考到这里，我们已经将除IE7+，Firefox，Chrome，Safari，Opera的浏览器兼容性有一个很好的解决，在这一套方案里面你不再需要为图片字水平垂直居中而设置烦人的左右，上下外边距，因为你已经将这些交给了浏览器的渲染引擎去计算了，这样做对齐效果更佳而且效率大大提高，再看一下这些CSS样式，我没有一处地方使用CSS hack，代码写法更加符合W3C规范!

好，有一些朋友可能会说，IE6你如何解决呢?这个问题问得好，尽管IE6已被微软宣布死亡，但IE6在中国依旧活得很“滋润”。根据CNNIC(中国互联网信息中心)的统计，IE6在浏览器市场的占有率从一年前的44.26%下降到了25.2%，但仍具有足够的劲头。而在几家反病毒公司的统计数据中，IE6的市场份额最高超过了35%，所以兼容它也是很有必要的，所以在中国当页面仔也不容易啊。

兼容IE6，要注意到由于IE6是不支持display:inline-block的，而图片字如果设置为display:inline，在text-indent:-9999px;情况下显示不了图片字的，原因与上面IE7描述的原因一致，而图片设置为display:block则应用不了vertical-align做为垂直居中，鉴于inline-block化图片字元素能大幅度提升工作效率，因此做一些必要的hack，权衡下来还是值得的。我给出的方案如下：

解决方案：

/* 
 
* 1.使图片字水平居中 
 
* 2.让图片字垂直居中 
 
* 3.让a标签inline-block化,让width,height(盒模型属性)起作用 
 
*/ 
 
.button{ 
 
text-align:center; /*1*/ 
 
width:200px; 
 
height:50px; 
 
line-height:50px; /*2*/ 
 
display:inline-block; /*3*/ 
 
background:#000; 
 
} 
 
/* 
 
* 1.在父容器line-height里面垂直居中 
 
* 2.让a标签inline-block化,让text-indent起作用 
 
* 3.IE6图片字背景超出其设置的宽高 
 
* 4.让IE6对图片字区域也显示手指 
 
*/ 
 
.button .txt{ 
 
vertical-align:middle; /*1*/ 
 
display:inline-block; /*2*/ 
 
text-indent:-9999px; 
 
background:url(images/png24_ie6.png) no-repeat ; 
 
_overflow:hidden; /*3*/ 
 
cursor:pointer; /*4*/ 
 
} 
 
.button .txt1{ 
 
width:73px; 
 
height:12px; 
 
background-position:0 -19px; 
 
} 
 
/* 
 
* 1.解决让IE6/7在使用了text-indent:-9999px;情况下隐藏了图片字背景 
 
*/ 
 
.button .hack{ 
 
+zoom:1; 
 
} 

 12px像素

这个方案能兼容IE6+ ，Firefox，Chrome，Safari，Opera，这个方案我喜欢用于必须兼容IE6的项目，至于只需兼容IE7+以上的项目我更偏好选择之前加 空字符的解决方案。

写到这，我想表达的是一旦遇到兼容性问题，不要麻木看现象写hack，如果你只知道浮动能解决IE6/7显示不了背景，然后在还没有把为什么浮动能解决问题的本质原因搞清楚的前提下就忙着为其带来的副作用去写另一个hack，这是不可取的，这些话也是自己对以前的自己说的，而我写这个例子更多是想将自己在解决浏览器兼容性问题的思路分享出来，其实可以提高砌页面的效率还有很多，这里无可能一一列举，但愿这个例子能给你一些新思路!

本文来源 我爱IT技术网 http://www.52ij.com/jishu/5649.html 转载请保留链接。