Wuff, Wuff!!: CSS Hacks & Issues

9/18/2007

CSS Hacks & Issues - 這邊整理出一些常見的CSS Issues & hacks

Transparent PNG’s in IE6 - IE6處理透明的PNG圖檔有問題，有另外寫好的模組：PNG Behavior
* html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
}
Applying a width to inline elements
If you apply a width to an inline element it will only work inIE6. This is actually a fault of IE6 - inline elements shouldn't need to have a width assigned to them.
You can’t change the width of an inline element. A way around this is to change the element from inline to block.

span {
width: 150px;
display: block
}

Applying display: block will turn the span into a block element, allowing you to change the width. One thing to note however is that block elements will always start on a new line, so you might have to use floats as well.
Centering a fixed width website - 這邊應該是講錯了，要讓IE/FF都置中的語法通常是這樣：
<body style="text-align:center;">
<div id="wrapper" style="border: 1px solid #ccc; margin: 0 auto; width: 500px;">
sample text
</div>
</body>

standard的作法只要讓div有寬度，再讓左右兩邊的margin為auto，讓瀏覽器自行計算，就會置中。不過IE不吃這一套，要在外面那一層(在這是body)設為text-align:center，在裡面那層(wrapper)再把text-algin設回left，這當然不是text-align應該有的行為，這是用bug來解bug。
Image replacement technique

Search