首页 > web前端 > css教程 > 正文

网页制作中十个最好的CSS hacks_经验交流

WBOY
发布: 2016-05-16 12:06:23
原创
1236 人浏览过

 如果您是前端编码员,您必须知道制作跨浏览、有效的 CSS 和 xHTML 代码有多么重要。 而且您还必须知道我们在各种浏览器的所有这些黑客和修复上花费了多少时间。 我之前写过一些关于 PNG 透明度问题、Web 表单中的黄色字段、垂直对齐 div 等的内容。

这里列出了 10 个精选的 CSS 黑客和技巧,可以帮助您CSS 代码,还可以节省一些时间。

1。 垂直对齐div(垂直居中)

http:/
* html 选择器{property:value;}
/*stylizedweb.com/2008/02/01/vertical-align-div/

2. Min-Height(最小高度)

选择器{
min-height:500px;
高度:自动; !重要
高度:500px;
}

3. PNG透明(透明png)

http://stylizedweb.com/2007/12/30/png-transparency-issues/

4。 自动清除(自动清除)

.container:after {
content:“.”;
显示:块;
高度:0;
明确:两者;
可见性:隐藏;
}
.container {display: inline-table;}
/* 从 IE-mac */
* html .container {height: 1%;}
.container {display : block;}
/* 结束从 IE-mac 隐藏*/

5. 重置 CSS(CSS 重设)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
字段集,输入,p,块引用,th,td {
边距:0; 填充:0;
}
表 {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
地址、标题、引用、代码、dfn、em、strong ,th,var {
字体样式:正常;字体粗细:正常;
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {字体大小:100%;}
q:之前,q:之后 {内容:”;}

6. 滚动渲染 IE(IE 滚动条渲染)

html {
background : url(null) 固定无重复;
}

7. 不透明度(透明度)

#transdiv {
filter:alpha(opacity=75);
-moz-不透明度:.75;
不透明度:.75;
}

8. PRE Tag (标签预格式)

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla,自 1999 年起*/
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

9. Li 背景 重复 IE (LI 标签背景重复)





10。 很高兴知道(最好知道的)

@charset“UTF-8”;

/* ———————————————————————-
WinIE7
——————————— ————————————- */
*:first-child+html 选择器{property:value;}

/* ——————————— ———————————-
WinIE6 和 Mac IE
————————————————————————-*/
* html 选择器{property:value;}

/* ————————————————————————-
WinIE6
————————————————————————- */
/***/

/* ———— ——————————————————-
MacIE
——————————————————————— - */
/***/
选择器{property:value;}
/**/

相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板