CSS常见问题及解决方案

作为前端开发人员，在日常的页面制作时，不可避免的会碰上这样那样的问题，这时就需要寻找这些XHTML及CSS常见问题的解决方案。我根据自己的经验和心得挑选和整理了一些XHTML常见问题和CSS常见问题的解决方案进行总结归档，希望对大家会有所帮助：1、如何定义高度很小的容器？在IE6下无法定义小高度的容器，是因为有一个默认的行高。列举2种解决方案：overflow:hidden|line-height:02、图片下方出现几像素的空白间隙？这个也有多种解决方案，如将img定义为display:block,或定义父容器为font-size:0，个人更推荐使用vertical-align的方式，它的值可以是text-top|text-bottom|middle等3、IE6双倍margin的BUG?display:inline4、文本垂直方向对齐文本输入框？设置input为vertical-align:middle，textarea也是如此5、为什么在web标准下ie无法设置滚动条的颜色？将设置滚动条颜色的样式定义到html标签选择符上即可6、如何让层在falsh上显示？不可以，除了少数几个级别很高的家伙除外。但可以将flash设置为透明，这时层就会透过falsh显示，近似于覆盖在flash之上了，如：paramname=modevalue=transparent/7、如何使得文字不换行？定义包含文字的容器为：width:xxx;white-space:nowrap;8、ie中如何让超出宽度的文字显示为省略号？定义容器为：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;9、如何在点文字时也选中checkbox?inputid=testtype=checkboxvalue=on/labelfor=test测试/label10、一个div为margin-bottom:10px，一个div为margin-top:5px，为什么2个div之间的间距是10px而不是15px?这种情况浏览器会自动进行margin重叠，只显示较大的margin值解决方案：只设置其中一个div的margin为15px11、如何解决ie下当li中出现2个或以上的浮动时，li之间产生的空白间隙？设置li的vertical-align，值可以为top|text-top|middle|bottom|text-bottom12、如何使得英文单词不发生词内断行？word-wrap:break-word;13、为什么被访问过的链接颜色没有变化？定义链接的样式时，需要按照:link,:visited,:hover,:active这样的顺序，可以使用LoVeHAte（喜欢讨厌）来记忆14、单行文本如何垂直居中？height:xxx;line-height:xxx;高和行高相同即可15、已知高度的容器如何在页面中水平垂直居中？高固定情况下的水平及垂直居中作者:飘零雾雨日期:2007-07-30字体大小:小中大哇，好久没有Blog一下了，最近实在是忙晕了头，当然不仅仅是工作的问题，还有其它的。今天终于是忙里偷闲，好不容易有点时间更新一下Blog了，却被蜘蛛网似的杂乱无章的引用，留言，评论给搞得不爽，准备等再有时间就把“引用”什么的功能去掉，太多垃圾引用了。发现好长一段时间或者说一直以来，很多同学都对居中这个话题十分感兴趣，当然这里既有水平居中也包括垂直居中。相信水平居中大家都已经了解并会使用了，无非就text-align:center这样，还有为了兼容不可或却的margin:auto。某样功能或效果的实现其实都是依据一定的原理基础上的，有的东西只要明白了它的原理，至于有多少种实现方法和各方法的写法优劣这都会因个人对原理的理解程度不一而有所不同。扯远了，还是回来聊所谓的垂直居中（要垂直居中的这个东东的高度是即定的）。如，要使得一个高150px，宽任意的东东在浏览器中垂直居中：［演示地址：］CSS部分：html,body{margin:0;font:12px/180%宋体;text-align:center;height:100%;}#main{width:300px;height:150px;background-color:#ddd;text-align:left;overflow:hidden;position:relative;top:50%;margin:-75pxauto0auto;}#mainh3{margin:0;font:bold18px/150%宋体;}XHTML部分：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN==Content-Typecontent=text/html;charset=gb2312/metaname=Authorcontent=飘零雾雨|[e-mail]/title传说中的水平及垂直居中(高固定)/title/headbodydivid=mainh3传说中的水平及垂直居中/h3ulli传说中的水平及垂直居中/lili传说中的水平及垂直居中/lili传说中的水平及垂直居中/lili传说中的水平及垂直居中/lili传说中的水平及垂直居中/li/ul/div/body/html如上面这个例子，就已经实现了高为150px的div垂直居中。XHTML部分没有什么值得考究的，只需要看一下CSS部分就行了。首先我们知道要使得一个东东始终呆在浏览器的某个位置，这需要用到position，然后通过top,right,bottom,left来控制具体位置。要使得这个div垂直居中，OK，肯定会想到top:50%。这样其实div的顶部就已经是垂直居中了，但对于整个div来说还并没有垂直居中，所以它需要以顶部作为轴心向上移动若干像素，移动多少呢？废话，当然是这个div实际高度的一半：75px。这样就能保证轴心上下的高是一样的，也就是说整个div就实现垂直居中了。然而为什么要指定html,body{height:100%}呢？这和position:relative有什么联系呢？自己去想，呵呵。16、未知尺寸的图片图如何水平垂直居中？CSS未知尺寸的图片在容器中垂直居中的方法作者:飘零雾雨日期:2007-09-28字体大小:小中大转载请注明出处，css探索之旅-飘零雾雨的庄园最近，对于如何用纯CSS实现未知尺寸的图片在容器中水平垂直居中这个问题，大家表现出关注度非常高。首先，我们不要去追究是否有这样做的必要，因为有的时候图片是从数据库读取的，可能大小不一，这时候为了不让图片大小不一而破坏了页面的美观性，其实就有必要这么做了。总的来说，会有几种方案可以用来做这件事。这里，我只写一种个人认为较为简单和易于理解的方法。［预览地址：］CSS部分：.outer{display:table;*display:inline;*position:relative;width:300px;height:300px;}.outerp{display:table-cell;*position:absolute;*top:50%;*left:50%;vertical-align:middle;}.outerpimg{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}XHTML部分：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN=:lang=zh-cnlang=zh-cnheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/metahttp-equiv=Content-Languagecontent=zh-cn/titleVerticalCenteringinCSS/titlemetaname=descriptioncontent=纯CSS实现未知尺寸的图片的水平垂直居中演示/metaname=keywordscontent=纯css,垂直居中/metaname=Authorcontent=Doyoe(飘零雾雨),[e-mail]//headbodyh1VerticalCenteringinCSS/h1ulclass=dyboxliclass=outerpimgsrc=1.gifalt=图片水平垂直居中//p/liliclass=outerpimgsrc=2.gifalt=图片水平垂直居中//p/liliclass=outerpimgsrc=3.gifalt=图片水平垂直居中//p/li/ul/body/html假设上面XHTML中的图片1.gif和2.gif就是从数据库读取出来的（可以使用本地机器上现有的图片测试），它们的尺寸规格不同。我们可以看到的效果为：它们都在容器outer里垂直居中了。其实对于支持display:table|table-cell的浏览器来说，远不需要如此多的步骤就可以实现未知高度的图片的垂直居中了。而CSS部分里的Hack都是为不支持这些属性的IE准备的。为了测试，可以将以上的Hack部分都注释掉，然后看看效果。另一种实现方式：纯CSS使用font-size实现未知尺寸图片的垂直居中17、标准模式和怪异模式下的盒模型区别？标准模式下：实际宽度=width+padding+border怪异模式下：实际宽度=width-padding-border18、如何解决IE下的3像素BUG?避免和清除宽自适应布局在ie中产生几像素差异的方法作者:飘零雾雨日期:2007-07-24字体大小:小中大标题想了半天也想不到一个好的，感觉怎么写怎么长!--怕是小学时缩句没学好。今天想说的这个问题应该算是老调重谈了，不过写出来希望会给大家一些帮助，也使我自己不会忘记，毕竟好记性比不上烂笔头。相信做过宽度自适应布局的同学都碰到过在ie下莫名其妙的多出几像素的问题，我也觉得ie总是让人不断的折腾，可能是怕我们老坐在电脑前不“运动”会滋生出些什么乱七八糟的毛病来：）先写个在不考虑ie情况下的宽自适应的两栏布局：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN==Content-Typecontent=text/html;charset=gb2312/metaname=Authorcontent=飘零雾雨|[e-mail]/title关于自适应宽度布局在IE中的几像素异常/titlestyl