网页制作中十个最好的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 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.

1. Vertical align div (垂直居中)

http://stylizedweb.com/2008/02/01/vertical-align-div/

2. Min-Height (最小高度)

selector {
min-height:500px;
height:auto; !important
height:500px;
}

3. PNG transparency (透明png)

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

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:100%;}
q:before,q:after {content:”;}

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

html {
background : url(null) fixed no-repeat;
}

7. Opacity (透明度)

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

8. PRE Tag (标签预格式)

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 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 Background Repeat IE (LI标签背景重复)

<!–[if lt IE 7]>
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]–>

10. 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;}
/**/



相关阅读:
JSP: 调用servlet 显示图片
避免回车键导致的页面无意义刷新的解决方法
PHP+javascript液晶时钟
Oracle Faq(Oracle的版本)
怎样解决mysql连接过多的错误?
Flash和ASP实现的用户登录/注册程序
php ajax无刷新分页,支持id定位
CSS 美化段落文本之首字下沉
Javascript var变量隐式声明方法
javascript 模拟游戏中的弹出菜单效果
使用FusionCharts+Jquery实现报表钻取
jsp防盗链
网页排版经常用到的5个CSS基础
简单实用的网页表格特效
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 2017年自愿的离婚协议书范文 小学六年级作文1000字:一次特殊的体验 人人手里攥着一把霾 文章作文500字 三年级关于课余生活的作文200字 成功是短暂的 黄志彬 —— 专业潜能激励训练导师 高中毕业生自我鉴定样板(六) 【网络红人周筱枫】世界末日虽假,但不可不信。请写下你爱的人的名字吧 火海逃生作文700字 妈妈,您辛苦了作文300字 有智力可小成 有耐力可大成 教师节县领导讲话稿 关于学校乱收费的调查报告 家庭“主男”700字 600字作文:与远方同行,带着梦想出发 校园银杏树作文750字 春之随笔(转载)作文700字 儿童诗歌:看云 打开一扇属于自己的安全门700字 村级债务清理工作汇报材料 续...这些,那些。 一直走着回去 学会成长——观《成长之惑》有感作文1300字 小学四年级上第一学期信息技术教学计划与进度表 爱死了,爱疯了,爱傻了 讲诚信作文800字 赚小钱与赚大钱 小学关爱留守儿童工作计划 后勤部第一季度工作总结 护士节征文演讲稿 天使不后悔 会议的组织策划 热闹的大芬村 依旧难过作文200字 急性汉子 华岩镇社会实践笔录 拜年喽 时光冢 我与傻妞相处的日子(1)作文400字 2015党支部考察意见 2014最新中秋节祝福语 施工员2011年度工作总结和2012年工作计划 五星花开 烟花爆竹燃放秩序工作方案 大学管理学院贯彻落实科学发展观分析检查报告 2016小学生国旗下演讲稿 励志的短信 第一次接触 有一种思念永不疲惫 高考的百天倒计时

Copyright © 2016 phpStudy |