DIV CSS 佈局教程網

1、說明本文闡述了8條我們發現的在用CSS設計中有用的解決方案。

2、浏覽器特定的選擇器

查看原文：http://diger.cn/blog/?p=324
英文地址：  http://www.solidstategroup.com/page/1592

翻譯說明：

這是Solid State Group網站上的一篇很友好的文章，解決了我在設計中遇到的很多問題，故在此我翻譯其文，並對原作者表示非常感謝！

當你想在一個浏覽器裡改變樣式而不像在其他浏覽器中改變時，這些選擇器很有用。

IE6以下

   *Html{}

IE 7 以下

*:first-child+Html {} * Html {}

只對IE 7

*:first-child+Html {}

只對IE 7 和現代浏覽器

Html>body {}

只對現代浏覽器(非IE 7)

Html>/**/body {}

最新的Opera 9以下版本

Html:first-child {}

Safari

Html[XMLns*=”"] body:last-child {}

要使用這些選擇器，請在樣式前寫下這些代碼。例如：

#content-box {
width: 300px;
height: 150px;
}
* Html #content-box {
width: 250px;
}
/* 重寫上面的代碼並且把寬度改為250PX
在IE6以下版本中適用。 */

3、在IE6中使用透明PNG圖片

IE6的一個很難處理的BUG就是它不支持透明PNG圖片。

你可能需要用一個重寫的CSS的濾鏡來解決這個問題：

*Html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”fil
ename.png”, sizingMethod=”scale”);
}

4、去掉連接虛線框

當你點擊鏈接時，Firefox會在鏈接周圍產生一個虛線外框。

這個很好解決，只需在a標簽中添加outline:none就可以了。

a{
   outline:none;
}

5、對inline元素應用寬度。

如果你對一個inline元素使用寬度，它將只在IE6下起作用。

所以的Html標簽要麼是Block的要麼就是inline的。inline屬性的標簽有<span><a><strong>和<em>Block標簽包括<div><p><h1><form>和<li>

你不能控制inilne標簽的寬帶，不過有一個方法是把標簽屬性從inline改為Block。

span{
   width:150px;
   display:block;
}

應用display:block能夠把span標簽變成block標簽，從而控制它的寬度。

6、使一個固定寬度的網站居中。

為了讓你的網站在浏覽器中居中，可以為最外層Div添加position:relative屬性，然後將margin設為auto。

#wrapper {
margin: auto;
position: relative;
}

7、圖片替換技術

對於頭部來說，永遠是最好用文字而不是圖片。在你必須要用圖片的某個特殊地方最好使用隱藏文字的層的背景圖片。這對於屏幕閱讀和SEO非常有用，盡管依然使用很普通的文字，這可以聯想到所有的優點。

Html：

<h1><span>Main heading one</span></h1>

CSS:

h1 {
background: url(heading-image.gif) no-repeat;
}
h1 span {
position:absolute;
text-indent: -5000px;
}

正如你所見，我們對H1標簽使用普通的Html代碼，用CSS來將圖片替代文字。Text-indent把文字放到左邊5000像素處，從而用戶看不到它們。

8、最小寬度

IE的另外一個Bug就是它不支持min-width屬性。min-width確實非常有用，特別是對於100%寬度的可變模板來說，因為他告訴浏覽器停止收縮。

對於除IE6以外的所有浏覽器來說你只需min-width:xpx;例如：

.container {
min-width:300px;
}

要讓這些在IE6下起作用的話你要添加額外的努力！你需要創建兩個DIV，一個包含著另一個。

<div class=”container”>
<div class=”holder”>Content</div>
</div>

然後你需要設置外面層的min-width：

.container {
min-width:300px;
}

現在又要IE hack起作用了，你需要寫下以下代碼：

* Html .container {
border-right: 300px solid #FFF;
}
* Html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}

當浏覽器窗口調整外層寬度來適應直到它縮小到border的寬度時，這個時候它就不能夠在縮小了。而holder層也會停止收縮。外層的邊框寬度變成了內層的最小寬度。

9、隱藏水平滾動

要去除水平滾動條，可以在body中插入overflow-x:hidden屬性。

body {
overflow-x: hidden;
}

這在你決意要用一個比浏覽器款的圖片或Flash時很有用。