2008 Aug 30

10 Top CSS hacks

By Robin | Posted in CSS | Tagged , , , | Comments (0) | Views(1,356) |
浏览器兼容性永远是前台人员的痛。据统计，超过40%的时间都花在了兼容性问题上。Microsoft的固执，让开发人员编写一套完美的CSS是那么的痛苦。知道一些CSS hacks总是好的……

垂直对齐

目前CSS难以实现的一项功能是旧式垂直居中。也许CSS3的到来可以解决这个问题，不过我相信在长期一段时间内IE是不可能支持CSS3的。目前有两种方法解决垂直对齐的方法。
第一种办法就是用一个DIV来做“垫底”，把装载内容的DIV推到水平的中央。下面的示例中，ID为wrap的DIV内为主要内容，ID为shim的DIV是“垫底”的……

Cross-browser issues are always nightmares to developers. Accroding to cencus, more than 40 percents of time comsumed is spent on compitablilty preblems. The ego of Microsoft has made it painful to compose a perfect CSS for all browers. Therefore, you better know some Css hacks.

Vertical align div

It’s hard to vertical align the DIV in the current CSS. CSS3 might solve proble, but CSS3 is a remote hope. There are two ways to make it.
The first one is to use a DIV as the supporter, pulling the content DIV to the vertical-center. As in the example, the DIV with ID wrap is main content, while the DIV with ID shim acts as Supporter. 

<div id="shim"/></div>
<div id="wrapper">
Content
</div>
html, body {
height: 100%;
margin: 0;
padding: 0;
}

* {
margin:0px auto;
padding:0;
}

div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}

div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */

}

/* Hide from IE5mac \*//*/
div#shim {
display: none;
}

html, body {
height: auto;
}
/* end hack */

/* ]]> */

第二种办法可能更简单一些，但是会影响定位属性：

<div id="wrapper">
<div id="cont">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt, sapien sit amet semper molestie, diam justo ullamcorper tortor, at aliquam neque est eget lacus. Etiam sit amet odio. Maecenas vulputate malesuada lectus. Morbi vestibulum.</p>
</div>
</div>

#wrapper {
	display: table;
	height: 300px;
	width: 300px;
	background: #aaa;
	_position: relative;
	overflow: hidden;
}

#cont {
	_position: absolute;
	_top: 50%;
	display: table-cell;
	vertical-align: middle;
}

#cont p {
	_position: relative;
	_top: -50%;
}

Min-Height

IE7和FF支持min-height,但是IE6不支持，而且会自动涨破容器。

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

PNG 透明

IE6不支持PNG透明已经家喻户晓了。纯CSS的解决办法用到了一个只有IE支持的条件语句。这意味着你不用修改你的原版CSS，只需要将代码加入HEAD部分。

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 */

重定义元素属性

每个浏览器对元素都有默认属性，但是不幸的是他们对待同一个标签的属性不一样。为了跨浏览器兼容性，我们有必要重新给予定义。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}

IE的上下滚动时背景固定

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

透明

很遗憾，如果你直接将内容放到这个DIV，那么内容本身也就透明了，建议在外面包裹DIV，让后将透明DIV定位到内容下方。

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

PRE 标签问题

默认状况下，PRE标签处理溢出会异常。

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+ */
}

LI的背景图片重复

关于选择符

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

<div id="shim"/></div>
<div id="wrapper">
Content
</div>
html, body {
height: 100%;
margin: 0;
padding: 0;
}

* {
margin:0px auto;
padding:0;
}

div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}

div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */

}

/* Hide from IE5mac \*//*/
div#shim {
display: none;
}

html, body {
height: auto;
}
/* end hack */

/* ]]> */

The second one may have some negative effect to Position property：

<div id="wrapper">
<div id="cont">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt, sapien sit amet semper molestie, diam justo ullamcorper tortor, at aliquam neque est eget lacus. Etiam sit amet odio. Maecenas vulputate malesuada lectus. Morbi vestibulum.</p>
</div>
</div>

#wrapper {
	display: table;
	height: 300px;
	width: 300px;
	background: #aaa;
	_position: relative;
	overflow: hidden;
}

#cont {
	_position: absolute;
	_top: 50%;
	display: table-cell;
	vertical-align: middle;
}

#cont p {
	_position: relative;
	_top: -50%;
}

Min-Height

Both IE7 and FF support min-height property, but never IE 7. Furthermore, IE6 tears up the container, ignoring the overflow property.

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

PNG 透明

It’s a common sense that IE6 doesn’t support PNG alpha chanel. Here is a pure css hacks, deploying Conditional Tag which is only available in IE.

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 */

Reset CSS

It’s a truth every brower has a set of default property for every elements, but it’s a tragic truth that every brower has a differnt set. Ok, let’s face the music and reset the default property for the poor browers.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}

Scrolling Render IE

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

Opacity

This will cause all the content to be opacy as well. It’s recommended to wrap it with another DIV, where the real content is, and position it to the bottom of the real content.

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

PRE Tag

By default, PRE Tag acts strangely while handling Overflow.

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+ */
}

Li Background Repeat IE

Selector Tricks

@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;}
/**/
This entry was written by Robin, posted on August 30, 2008 at 10:44 pm, filed under CSS and tagged , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never shared. Required fields are marked *

*
*

    Most Commented