网页制作中十个最好的CSS hacks(网页制作范例)

If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I've written about some of them earlier on PNG transparency issues, Yellow fields in web form, Vertical align div etc.. Here is the list of hand picked CSS hacks and tricks which can help you in your CSS code and also save some time. 1. Vertical align div (垂直居中) 2. Min-Height (最小高度) selector { min-height:px; height:auto; !important height:px; } 3. PNG transparency (透明png) 4. Autoclear (自动清除) .container:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } .container {display: inline-table;} /* Hides from IE-mac */ * html .container {height: 1%;} .container {display: block;} /* End hide from IE-mac */ 5. Reset CSS (CSS重设) body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,p,blockquote,th,td { margin:0; padding:0; } table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,strong,th,var { font-style:normal;font-weight:normal; } ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:%;} q:before,q:after {content:”;} 6. Scrolling Render IE (IE滚动条渲染) html { background : url(null) fixed no-repeat; } 7. Opacity (透明度) #transdiv { filter:alpha(opacity=); -moz-opacity:.; opacity:.; } 8. PRE Tag (标签预格式) pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } 9. Li Background Repeat IE (LI标签背景重复) <!?[if lt IE 7]> <style> #leftnav li { zoom: 1;} /* haslayout=true */ </style> <![endif]?> . Good to know (最好知道的) @charset “UTF-8″; /* ———————————————————————- WinIE7 ———————————————————————- */ *:first-child+html selector{property:value;} /* ———————————————————————- WinIE6 & Mac IE ———————————————————————- */ * html selector{property:value;} /* ———————————————————————- WinIE6 ———————————————————————- */ /**/ * html selector{property:value;} /**/ /* ———————————————————————- MacIE ———————————————————————- */ /**//*/ selector{property:value;} /**/

推荐整理分享网页制作中十个最好的CSS hacks(网页制作范例)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:网页制作十个页面,网页制作中十个问题,网页制作中十个问题,网页制作中十个工具,网页制作中十个问题,网页制作的,网页制作十个页面,网页制作中十个问题,内容如对您有帮助，希望把文章链接给更多的朋友！

CSS技巧DIV为空时占据空间的解决办法 此时在IE中到底是什么在影响着最终的显示，又是如何解析的呢？可能的影响因素：字体大小（font-size），字体行高（line-height），高度（height），溢出

关于&lt; tbody &gt;的一个实例，很实用。 看到很多网友对tbody属性的讨论，我特意做了个实例，希望能对大家有所帮助。积木网tbody选项卡效果演示当前位置：展馆分布A展馆1楼展厅A展馆1楼展

网页布局设计的标准尺寸 1、*下，网页宽度保持在以内，就不会出现水平滚动条，高度则视版面和内容决定。2、*下，网页宽度保持在以内，如果满框显示的话,高