CSS的hack解决积累

一年里遇到的css问题总结一下：

到现在发现用hack越多证明你的水平越差，目前写的代码几乎没有用到这些解决方法了。但是话说回来只有遇到问题并且解决才能最终达到预防。直到所有的都遇到了你也就是高手了！

应用最多的本人感觉就是：height:1%;overflow:hidden;//解决float等问题

 

 

 1、高度自适应问题： 完美解决办法： div{ height:auto !important; height:xxx px; min-height:xxx px; } 前提是：在div（此处的div只是个常用案例，并非只能用在这个标签上）的结束标签前加上清除浮动的代码。该代码样式写法如下： { visibility:hidden; display:none; clear:both; font-size:0; height:0; } 2、完全居中问题： 说明：垂直居中只适用于页面高度固定的情况。 完美解决办法（不会出现内容看不见的问题）： 假设你的主体框架为#main 页面结构写法如下： <div id="vertical"> </div> <div id="main">xxxx</div> 样式写法如下：（样式中的背景色只是为了测试而用非必写项，body中的text-align为必写项。） html,body{ height:100%; margin:0; padding:0; } body{ text-align:center; background:#eae7d7; } #vertical{ float:left; height:50%; width:100%; margin-top:-305px;/* half vertical height*/ } #main{ width:1003px; height:611px; margin:0 auto; background:#666; text-align:left; } 3、IE7 样式单独写法：*+html后面要有空格。 *+html #main{ xxxx !important; } FF样式单独写法： #main{ xxxx !important;/*此句是针对FF的*/ xxxx; } 4、解决ie6、ie7、 FF、opera下样式显示都不同的问题： 办法： { background:orange; /* ff识别的 */ *background:orange; /* ie7识别的 */ _background:orange; /* ie6识别的 （顺序不能变）*/ } 说明：以上写法，虽然能实现效果，但在通过标准验证时会有警告提示。故，提倡一般不要用 *样式 的写法。如果不用*，就可以采用前面第3条提到的专门针对IE7 的样式的写法。 解决FF和ie7相同，但与ie6不同 { background:orange important; /* ie7识别的/ ff识别的 */ background:orange; /* ie6识别的 （顺序不能变）*/ } opera识别样式 @media all and(min-width:0){ .disc span.sright{ margin-top:0px; /*Opera */ } } 5、透明图片问题： #main{ background:url("../images/contentBg.png") left top no-repeat !important; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="images/cup.png"); _background:none } /*IE*/ #main{ background:#FCFAEE; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); } 说明参数 sizingMethod=noscale 是否repeat 6、cursor:hand 在FF浏览器下不识别。 解决办法： { cursor:pointer; } cursor:pointer;在IE和FF下都能识别，但在FF的标准验证中仍会有警告提示！ 7、FF中的浮动嵌套: 如ul li ol li/li /ol /li /ul 必须保持float闭合！否则会产生异常。 解决方法: { clear：both; } 8、标签非法嵌套问题： <dt></dt>或<dd></dd>或<li></li>内嵌如hx标签，在ie下正常，在FF下失去效果。 可能这样嵌套是非法的，所以尽量不要这样做。 目前还没有解决办法。 9、select标签有默认高度。如果样式表中设置比默认高度值小,ie6下为默认高度，ie7/firefox为设置值的高度。 10、滚动条： 更改滚动条样式（只包括颜色的修改），IE下可以识别，FF不识别。 { height:yyy px; width:xxx px; overflow:auto; scrollbar-face-color: #eee0ba; scrollbar-highlight-color: #e1ca97; scrollbar-shadow-color: #724519; scrollbar-3dlight-color: #e1ca97; scrollbar-arrow-color: #2a310f; scrollbar-track-color: #feebbe; scrollbar-darkshadow-color: #724519; } 11、块级元素要相对于它的上一级元素水平居中： /* IE */ 只要它的上一级元素设置了text-align:center;就行。 /* FF */ text-align:center; margin:0 auto;/*上下值依需要而定，左右值必须为auto*/ 所以，通常情况下，用后一种写法就好： { text-align:center; margin:0 auto; } 这样，就不用再针对不同的浏览器写了。 12、ul标签在FF中默认是有padding值的,而在IE中只有margin有值，所以我们通常会定义几个通用样式： *{ margin:0; padding;0; border:0px solid #fff; } ul,ol{ list-style-type:none; } 将所有元素的外边距和内边距的值都设为0，这样所有的浏览器就站在了同一起跑线上，接下来写其它样式的时候，就会方便很多。 13、在FF和IE中的BOX模型解释不一致导致相差2px。 所以，如果外边距为28px的话，应该按如下写： { margin:30px !important;/* FF */ margin:28px;/* IE */ } 14、margin加倍的问题： 设置为float的元素在ie下设置的margin会加倍。这是一个ie6都存在的bug。所以，如果你设一个： #left{ float:left; margin-left:10px; } 这种情况下，实际的margin-left的值是20px。如果可能的话，此时不要设相同浮动方向上的margin值，可能采用padding的值代替或者可以设#left的display:inline; 15、对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏 的float div后面做一个统一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> 比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但 是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来 了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以 我们应该这样解决 <div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一个float left而宽度是100%的DIV解决之 16、万能float 闭合(非常重要!) 给需要闭合的div加上 class="clearfix" 即可,屡试不爽. .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix {display:block;} 或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示} 17、高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。例： <div id=”box”> <p>p对象中的内容</p> </div> CSS： #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。 18、属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id] 中,所有p标签中有id的都是同样式的. 19、FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入 的方法来解决 <mce:style type="text/css"><!-- div { width:300px; word-wrap:break-word; border:1px solid red; } --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- div { width:300px; word-wrap:break-word; border:1px solid red; } --></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1"> div { width:300px; word-wrap:break-word; border:1px solid red; }</style> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaa</div> <mce:script type="text/javascrīpt"><!-- function toBreakWord(el, intLen){ var obj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+"&#10;"; strContent=strContent.substr(intLen,strContent.length); } strTemp+="&#10;"+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all */eakWord("ff", 37); // --></mce:script> 20、 背景半透明： opacity:0.5; /* 透明度20%*/ filter:alpha(opacity=50); /* IE */ 21、css hack <!--[if lt IE 7 ]><body class="ie6"><![endif]--> <!--[if IE 7 ]><body class="ie7"><![endif]--> <!--[if IE 8 ]><body class="ie8"><![endif]--> <!--[if !IE]>--><body><!--<![endif]--> ---------------------------------------------------------------------------------------------------------------- 22、设置1像素的块级元素的高度。 div{ font-size:0px; height:xxpx; } 23、绝对定位时要注意浮动问题。 24、文字左右居中 text-align:justify; text-justify:inter-ideograph； 25、文字竖着排: -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); ----------------------------------------------------------------------------------------------------------------