CSS常见问题及解决方案.doc

作为前端开发人员，在日常的页面制作时，不可避免的会碰上这样那样的问题，这时就需要寻找这些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之上了，如：7、如何使得文字不换行？定义包含文字的容器为：width:xxx;white-space:nowrap;8、ie中如何让超出宽度的文字显示为省略号？定义容器为：overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;9、如何在点文字时也选中checkbox?测试10、一个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这样的顺序，可以使用LoVe HAte（喜欢讨厌）来记忆14、单行文本如何垂直居中？height:xxx;line-height:xxx; 高和行高相同即可15、已知高度的容器如何在页面中水平垂直居中？高固定情况下的水平及垂直居中 作者:飘零雾雨 日期:2007-07-30字体大小: 小 中 大哇，好久没有Blog一下了，最近实在是忙晕了头，当然不仅仅是工作的问题，还有其它的。今天终于是忙里偷闲，好不容易有点时间更新一下Blog了，却被蜘蛛网似的杂乱无章的引用，留言，评论给搞得不爽，准备等再有时间就把“引用”什么的功能去掉，太多垃圾引用了。发现好长一段时间或者说一直以来，很多同学都对居中这个话题十分感兴趣，当然这里既有水平居中也包括垂直居中。相信水平居中大家都已经了解并会使用了，无非就text-align:center这样，还有为了兼容不可或却的margin:auto。某样功能或效果的实现其实都是依据一定的原理基础上的，有的东西只要明白了它的原理，至于有多少种实现方法和各方法的写法优劣这都会因个人对原理的理解程度不一而有所不同。扯远了，还是回来聊所谓的垂直居中（要垂直居中的这个东东的高度是即定的）。如，要使得一个高150px，宽任意的东东在浏览器中垂直居中：演示地址：http:/www.doyoe.com/model/xhtmlcss/style/cenmid.htmCSS部分：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:-75px auto 0 auto;#main h3 margin:0;font:bold 18px/150% 宋体;XHTML部分：传说中的水平及垂直居中(高固定) 传说中的水平及垂直居中 传说中的水平及垂直居中 传说中的水平及垂直居中 传说中的水平及垂直居中 传说中的水平及垂直居中 传说中的水平及垂直居中 如上面这个例子，就已经实现了高为150px的div垂直居中。XHTML部分没有什么值得考究的，只需要看一下CSS部分就行了。首先我们知道要使得一个东东始终呆在浏览器的某个位置，这需要用到position，然后通过top,right,bottom,left来控制具体位置。要使得这个div垂直居中，OK，肯定会想到top:50%。这样其实div的顶部就已经是垂直居中了，但对于整个div来说还并没有垂直居中，所以它需要以顶部作为轴心向上移动若干像素，移动多少呢？废话，当然是这个div实际高度的一半：75px。这样就能保证轴心上下的高是一样的，也就是说整个div就实现垂直居中了。然而为什么要指定html,bodyheight:100%呢？这和position:relative有什么联系呢？自己去想，呵呵。16、未知尺寸的图片图如何水平垂直居中？CSS未知尺寸的图片在容器中垂直居中的方法 作者:飘零雾雨 日期:2007-09-28字体大小: 小 中 大转载请注明出处，css探索之旅-飘零雾雨的庄园最近，对于如何用纯CSS实现未知尺寸的图片在容器中水平垂直居中这个问题，大家表现出关注度非常高。首先，我们不要去追究是否有这样做的必要，因为有的时候图片是从数据库读取的，可能大小不一，这时候为了不让图片大小不一而破坏了页面的美观性，其实就有必要这么做了。总的来说，会有几种方案可以用来做这件事。这里，我只写一种个人认为较为简单和易于理解的方法。预览地址：http:/www.doyoe.com/model/xhtmlcss/style/vercen/1.htmlCSS部分：.outerdisplay:table;*display:inline;*position:relative;width:300px;height:300px;.outer pdisplay:table-cell;*position:absolute;*top:50%;*left:50%;vertical-align:middle;.outer p img*position:relative;*top:-50%;*left:-50%;vertical-align:middle;XHTML部分：Vertical Centering in CSSVertical Centering in CSS假设上面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情况下的宽自适应的两栏布局：关于自适应宽度布局在IE中的几像素异常html,body margin:0;#dyhead margin-bottom:5px;#dyhead,#dyfoot background:#999;#dyleft float:left;width:400px;height:100px;background: #666;#dyright height:100px;margin-left:400px;background: #ccc;#dyfoot clear:both;margin-top:5px;Head左固定右自适应Foot 上面的例子在非IE的浏览器中已经比较好的实现了宽自适应的布局，但用在IE中，会发现左右两栏之间多出了一个几像素的间距。 这就是前面说的几像素问题 一、如何避免： 首先应该是去想如何避免出现这个问题，其实很简单，只需要将右栏（也就是要自适应宽度的那栏）的高度去掉，意思就是不要给自适应宽的那栏设置高。 把上面的#dyright样式改为：#dyright margin-left:400px;background: #ccc; 只需要把之前该样式里面的height去掉，就可以避免了出现那几像素差异的问题。 搞定这个问题后，再小玩一下，在不考虑右栏的宽要自适应的情况下。之前因为设置了height会出现这个问题，那么给#dyright加个width又会怎样呢？任意给了一个width值后，发现那消失的几个像素又回来了，于是估计IE中这几像素的差异是不浮动栏中的宽和高在作怪。 二、如何清除 一般情况下能避免这个问题当然是比较理想的，但也不否决会有特殊情况。 如果在不能去除自适应宽度那栏的height情况下，IE中那几像素差异就无法避免了，只能想别的方法来清除掉这个差异。 当然，这也是非常简单的一个方法，只需小改一下就OK。修改如下：#dyleft float:left;width:400px;height:100px;background:#666;margin-right:0;_margin-right:-3px;#dyright height:100px;background:#ccc; 只需要给#dyleft加上一个margin-right负值就行了，开始你可能不知道这几像素差异具体是多少，但这几像素在页面上才那么点大，所以绝不会超过5px，这样你就可以一个一个去试咯，直到正好合适为止。 至于为什么是负值而不是正值，应该不用说了吧。如果这里给margin-right一个正值的话，那就把右栏推得更远，而这个缝隙也就更大了。 还有就是为什么要加一个_margin-right:-3px;这个的样式呢？因为在非IE浏览器下不会出现这个异常，如果这时也margin-right:-3px的话，那么它们左栏的宽度将会减少3px，所以它们的期望值是不变，于是就通过这样一个hack来绕过其它浏览器。 最后一点变化，就是将#dyright中的margin-left:400px去掉，因为这个也会给该栏的宽度带来变化，而宽度正是引起这个差异的元凶之一，所以应该去掉。 到这里，将#dyleft和#dyright样式改成这样之后，这个差异就被清除掉了，也十分的简单。以上的内容中出现ie均为ie6。 不知道同学们有否更简单有效的方法，如有，请给我留言：）19、如何做1像素细边框的table?方法1：设置table的border-collapse:collapse;tableborder-collapse:collapse;border-color:#000;tdborder-color:#000;测试测试方法2：关键在于设置cellspacine=1，用间隙来作为边框tablebackground:#000;trbackground:#fff;测试测试20、以图换字的几种方法及优劣分析以图换字，其实是为了保证页面的可读性，这样既有利于搜索引擎，又有利于结构查看。由于这种方式被大多数人所认同，所以方法也越来越多： 方法1：使用text-indent的负值，将内容移出容器； 方法2：使用display:none，将内容隐藏；方法3：使用padding将文字挤出容器之外，并将超出的部分hidden; 方法4：使用font设置超小字体，达到隐藏内容的目的。 方法1（非常不推荐）看起来蛮简单，但其实有几个不理想的地方，1是比较吃资源；2是在ie5下面会出现滞后背景无法显示；3是内容为超链接时，长长的黑色虚框，让你抓狂。 方法2（不推荐）其实倒也不复杂，只是需要多添加一个标签，比较浪费；且display:none出现的几率太多，对seo也是会有些许影响的。 方法3（推荐）Standard Model下要2层标签才能搞定，不过相对方法1和2还是有优势的，推荐一下。 方法4（强烈推荐）只需要将字体和行高设置为0，然后overflow:hidden就行;不过这样在Safari和Chrome下还是会有1px高的字出现，所以应该再设置一下字体的颜色和背景图相同或相近。以此就同样可以达到隐藏内容的目的，暂时还没发现有什么副作用，强烈推荐。21、如何容器透明，内容不透明？假设在标准模式下有如下结构： 我不要透明IE only的方法：在父容器outer被设置为透明后，只需要将子容器inner设置为position:relative; 如果需要兼容其它浏览器，则以上的方法不适用，且结构也需改为： 我不要透明然后使用position + z-index搞定位置22、如何去掉链接的虚线框？IE下：FF下:aoutline:none;23、如何使得页面字体行距始终保持n倍字体大小为基调？在body内设置line-height:n即可，注，不可以为它加上单位原因可参阅：http:/blog.doyoe.com/article.asp?id=19524、如何使用标准的方法插入flash? 25、Standard Model如何让容器可以height:100%？设置html,bodyheight:100%;margin:0;26、如何使得表格的宽度固定?设置table为table-layout:fixed;这时表格将使用固定布局算法，多出的内容将不影响表格的宽度27、如何让min-height兼容ie6?.min-heightmin-height:100px;_height:100px;我是兼容的min-height28、如何让鼠标变成手型且兼容所有现代浏览器？cursor:pointer29、如何实现ie6下的position:fixed?参阅：http:/blog.doyoe.com/article.asp?id=18830、IE下如何对Standard Mode与Quirks Mode进行切换？IE6以下的浏览器不用触发，直接以Quirks Mode呈现页面。IE6和IE7都可以触发的（在XHTML 的DTD申明前加上HTML注释）：IE6的触发（在XHTML 的DTD申明前加上XML申明）：当没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用Quirks Mode呈现。31、如何给一个元素定义多个不同的css规则？.acolor:#f00;.bbackground:#eee; 测试如上例，该元素同时拥有a和b定义的样式规则。多个规则之间使用空格分开，并且只有class能同时使用多个规则，id不可以32、如何区别display:none与visibility:hidden?相同的是display:none与visibility:hidden都可以用来隐藏某个元素；不同的是display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。33、如何解决按钮在IE7及以下浏览器中随着value增多两边留白也随着增加的问题？通常情况下，如果value的长度是固定不变的，可以给按钮设定一个固定的width，这是没有问题的，但在大多数情况下，按钮的value大多是可变的，所以给按钮设定width是不够理想的。解决方法，给按钮加上：#overflow:visible;padding:0 10px;其中overflow用于清除ie两边的留白，padding用于使得各浏览器的留白一致。