CSS常見問題小技巧解決辦法收集

1、常見問題

一、div標籤未關閉

　這是書寫代碼是最爲常見的一種錯誤了。特別是記事本書寫習慣的設計師，在未關閉的狀況下記事本的不會提示你什麼，若是是在DW中，未關閉DIV，開始的DIV會顯示灰色，即無效。

二、DOCTYPE聲明

　　不聲明DOCTYPE，或者在文件開始錯誤聲明DOCTYPE，也是一個常見錯誤。根據通常經驗，Strict DOCTYPE是你們追求的最高級驗證。Strict validation代表你的網頁可以在全部瀏覽器上都獲得最佳展現。
　　

三、結尾斜線

　　結尾斜線也是形成頁面失效比較常見的緣由。咱們很容易忽略結尾斜線之類的東西，特別是在image標籤等元素中。在嚴格的DOCTYPE中這是無效的。要在img標籤結尾處加上「/」以解決此問題。
　　

四、圖像alt屬性

　　你可能尚未注意到，圖像也是高級驗證的潛在絆腳石。除告終尾斜線，高級驗證也要求用alt標籤來描述圖像，如alt="收藏生活，享受生活"。搜索引擎也靠alt標籤來識別網頁上的圖像，因此不管怎樣加上alt標籤老是好的。

五、未知實體數據

　　實體數據是又一個影響驗證的易犯錯誤。咱們能夠考慮用適當的編碼字符來代替「&」等符號。entire list中列出在XHTML版塊設計中可用的適當的編碼字符實體數據。

六、不良嵌套

嵌套就是元素裏又包括元素，以下所示：
咱們容易混淆嵌套元素的順序。例如在div標籤前啓動strong標籤，但又先關閉div標籤。這可能不會改變版塊佈局，但卻會使你的版塊設計失效。

七、float元素的寬度之和要小於100%

    若是float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。所以請保證寬度之和小於99%。

 

-------------------------------------------------------------------------------------------

 

 

 

1，有關DIV居中的問題。
在body中若是設置DIV#box居中的話,用text-align:center；
效果是在IE6中可實現居中，且box中的文字也居中，而在FF中的表現是，文字居中，層box默認居左；爲了改變這種差別通常用：
body{margin:auto;} box{margin:auto;}這樣在IE6和FF中都同樣；

2,float浮動元素。
float可定位DIV，而設置爲float的DIV其margin值在IE下會加倍，FF中不會。這樣 若是設計者對多個浮動的DIV進行了margin設置（如#item1,#item2,#item3{float:left;margin- left:5px;}），則顯示結果在IE下與FF下會有很大差別。解決方案是在這個DIV中加入display:inline;如：
#item1,#item2,#item3
{float:left;
 margin-left:5px; /*ie理解爲10px*/
 display:inline; /*ie再理解爲5px*/
}

3,ul標籤
ul和uo在FF中默認的padding值不爲0，在ie中默認的margin值不爲0；所以在對UL進行操做以前先定義ul{margin:0; padding:0;}，以後對ul時行的設置，在兩種瀏覽器是表現一致的。

4，FF中BOX內容能自動伸到頁面底部的方法。
在IE中使用height:auto;可以使高度隨內容增長，而在firefox中高度就成固定的，BOX裏面的子層會溢出。
解決這個問題能夠在BOX中加入一個隱藏的層：<div id="clearbox"></div>,這個層作爲BOX的最後一個子層，高度自適應問題就可解決。
clearbox定義以下：
.clearbox{
 border-top:1px solid transparent!important;
 margin-top:-1px!important;
 border-top:0;
 margin-top:0;
 clear:both;
 visibility:hidden;
}
其做用就是解決浮動元素引發父元素沒法得到高度的問題。

5, 另外，設置 overflow:auto;也能夠；
6,當文字和圖片在同一行出現時，如何才能使他們在垂直方向居中呢？
  <div id="abc">文字一：<img src="../pic/btn.gif" /></div>
關鍵在於CSS中對圖片文件加上#abc img{vertical-align:middle;}的描述，就可使它們的中心在同一水平線上了！

7, 一個設置了邊框的容量，如#BOXa{border:#ccc solid 1px;}，它裏面有浮動元素，拖動滾動條時，在IE6,7中有時會出現邊框斷線的狀況（FF中不會），這時的解決辦法是在#BOXa中加一個屬 性：background:#fff;通常能夠解決；
8,僅IE7能夠識別

*+html select {…!important;}
=================================

你知道#box div{...}這樣寫的含義嗎？

是指，文檔中，以box爲ID的元素下邊的全部標籤名爲div的元素！也就是說，它並非來給box賦樣式，而是給box下的那兩個div賦樣式！（讓它倆的字爲紅色）

而你把div去了，那就是說此次是給box賦樣式了，那麼下面的div根本沒有指定任何樣式，因此按css的規定，靠近元素最近的樣式將生效！

===========================================

 

 

 

-------------------------------------------------------------------------------------------

 

 

 

 

1、IE6的雙倍邊距BUG

例如:

複製內容到剪貼板 程序代碼

<style type="text/css">
body {margin:0;}
div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;}
</style>

浮動後原本外邊距10px,但IE解釋爲20px,解決辦法是加上display:inline


2、爲何FF下文本沒法撐開容器的高度？

標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,那我又想固定高度，又想能被撐開須要怎樣設置呢？辦法就是去掉height設置min-height:200px; 這裏爲了照顧不認識min-height的IE6 能夠這樣定義：

複製內容到剪貼板 程序代碼

div { height:auto!important; height:200px; min-height:200px; }

3、怎麼樣才能讓層顯示在FLASH之上呢？
　　
解決的辦法是給FLASH設置透明:

複製內容到剪貼板 程序代碼

<a href="http://www.easyq.net.cn/">:</a>
<pre lang="html" line="1">
<param name="wmode" value="transparent" />

4、怎樣使一個層垂直居中於瀏覽器中？

複製內容到剪貼板 程序代碼

<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>

　
這裏使用百分比絕對定位，與外補丁負值的方法，負值的大小爲其自身寬度高度除以二

5、關於IE6樣式中背景圖片不緩存的BUG

示例：

複製內容到剪貼板 程序代碼

a{ background:url(images/normal.gif); } a:hover { background:url(images/hover.gif); }

若是爲超級連接定義上述的css樣式以實現鼠標懸浮時的動態效果，在firefox下是沒有什麼問題的，第一次加載以後，瀏覽器都會從緩存讀取背景圖片； 而IE6在這裏有一個bug，它每次都從服務器端讀取背景圖片，結果就是，若服務器反應較慢hover效果就會出現短暫的空白，使人極度不爽。 一直以來都是經過「兩張背景圖片合併、background-postion控制位置」的方式解決問題的，效果差強人意。 具體來講就是在頁面中加入一段簡單的javascript腳本，告訴ie6：本地有背景圖片的話就不要麻煩服務器了。 document.execCommand("BackgroundImageCache",false,true); 關於這段腳本的放置方式有兩種： 1.用CSS，在css中加入以下代碼 html {}{ filter: e­xpression(document.execCommand("BackgroundImageCache", false, true)); } 2.用JS：document.execCommand("BackgroundImageCache",false,true);