XHTML CSS 常見問題和解決方案

2021-06-21 12:03:38 字數 4030 閱讀 2612

1、如何定義高度很小的容器?

在ie6下無法定義小高度的容器,是因為有乙個預設的行高。

列舉2種解決方案:ovoverflow:hidden ¦ line-height:0

2、下方出現幾畫素的空白間隙?

這個也有多種解決方案,如將img定義為display:block,或定義父容器為font-size:0,個人更推薦使用vertical-align的方式,它的值可以是text-top ¦ text-bottom ¦ middle等

3、ie6雙倍margin的bug?

display:inline

4、文字垂直方向對齊文字輸入框?

設定input為vertical-align:middle,textarea也是如此

5、為什麼在web標準下ie無法設定滾動條的顏色?

將設定滾動條顏色的樣式定義到html標籤選擇符上即可

6、如何讓層在falsh上顯示?

不可以,除了少數幾個級別很高的傢伙除外。

但可以將flash設定為透明,這時層就會透過falsh顯示,近似於覆蓋在flash之上了,如:

7、如何使得文字不換行?

定義包含文字的容器為:width:***;white-space:nowrap;

8、ie中如何讓超出寬度的文字顯示為省略號?

定義容器為:overoverflow:hidden;width:***;white-space:nowrap;text-overflow:ellipsis;

9、如何在點文字時也選中checkbox?

測試10、乙個div為margin-bottom:10px,乙個div為margin-top:5px,為什麼2個div之間的間距是10px而不是15px?

這種情況瀏覽器會自動進行margin重疊,只顯示較大的margin值

解決方案:只設定其中乙個div的margin為15px

11、如何解決ie下當li中出現2個或以上的浮動時,li之間產生的空白間隙?

設定li的vertical-align,值可以為top ¦ text-top ¦ middle ¦ bottom ¦ text-bottom

12、如何使得英文單詞不發生詞內斷行?

word-wrap:break-word;

13、為什麼被訪問過的鏈結顏色沒有變化?

定義鏈結的樣式時,需要按照:link,:visited,:hover,:active這樣的順序,可以使用love hate(喜歡討厭)來記憶

14、單行文字如何垂直居中?

height:***;line-height:***; 高和行高相同即可

15、已知高度的容器如何在頁面中水平垂直居中?

參閱:"159"

17、標準模式和怪異模式下的盒模型區別?

標準模式下:實際寬度 = width + padding + border

怪異模式下:實際寬度 = width - padding - border

18、如何解決ie下的3畫素bug?

參閱:"68"

19、如何做1畫素細邊框的table?

方法1:設定table的border-collapse:collapse;

測試 測試

方法2:關鍵在於設定cellspacine="1",用間隙來作為邊框

測試 測試

20、以圖換字的幾種方法及優劣分析

以圖換字,其實是為了保證頁面的可讀性,這樣既有利於搜尋引擎,又有利於結構檢視。由於這種方式被大多數人所認同,所以方法也越來越多:

方法1:使用text-indent的負值,將內容移出容器;

方法2:使用display:none,將內容隱藏;

方法3:使用padding將文字擠出容器之外,並將超出的部分hidden;

方法4:使用font設定超小字型,達到隱藏內容的目的。

方法1(非常不推薦)看起來蠻簡單,但其實有幾個不理想的地方,1是比較吃資源;2是在ie5下面會出現滯後背景無法顯示;3是內容為超連結時,長長的黑色虛框,讓你抓狂。

方法2(不推薦)其實倒也不複雜,只是需要多新增乙個標籤,比較浪費;且display:none出現的機率太多,對seo也是會有些許影響的。

方法3(推薦)standard model下要2層標籤才能搞定,不過相對方法1和2還是有優勢的,推薦一下。

方法4(強烈推薦)只需要將字型設定為0,然後overflow:hidden;如font:0/0 arial;overflow:hidden;就同樣可以達到隱藏內容的目的,暫時還沒發現有什麼***,強烈推薦。

21、如何容器透明,內容不透明?

假設在標準模式下有如下結構:

我不要透明

ie only的方法:在父容器outer被設定為透明後,只需要將子容器inner設定為position:relative; 如果需要相容其它瀏覽器,則以上的方法不適用,且結構也需改為:

我不要透明

然後使用position + z-index搞定位置

22、如何去掉鏈結的虛線框?

ie下:

ff下:a

23、如何使得頁面字型行距始終保持n倍字型大小為基調?

在body內設定line-height:n即可,注,不可以為它加上單位

原因可參閱:"195"

24、如何使用標準的方法插入flash?

25、standard model如何讓容器可以height:100%?

設定html,body

26、如何使得**的寬度固定?

設定table為table-layout:fixed;這時**將使用固定布局演算法,多出的內容將不影響**的寬度

27、如何讓min-height相容ie6?

.min-height

我是相容的min-height

28、如何讓滑鼠變成手型且相容所有現代瀏覽器?

cursor:pointer

29、如何實現ie6下的position:fixed?

參閱:"188"

30、ie下如何對standard mode與quirks mode進行切換?

ie6以下的瀏覽器不用觸發,直接以quirks mode呈現頁面。

ie6和ie7都可以觸發的(在xhtml 的dtd申明前加上html注釋):

ie6的觸發(在xhtml 的dtd申明前加上xml申明):

當沒有使用dtd宣告或者使用html4以下(不包括html4)的dtd宣告時,基本所有的瀏覽器都是使用quirks mode呈現。

31、如何給乙個元素定義多個不同的css規則?

測試 如上例,該元素同時擁有a和b定義的樣式規則。

多個規則之間使用空格分開,並且只有class能同時使用多個規則,id不可以

32、如何區別display:none與visibility:hidden?

相同的是display:none與visibility:hidden都可以用來隱藏某個元素;

不同的是display:none在隱藏元素的時候,將其佔位空間也去掉;而visibility:hidden只是隱藏了內容而已,其佔位空間仍然保留。

XHTML CSS 常見問題和解決方案

作為前端開發人員,在日常的頁面製作時,不可避免的會碰上這樣那樣的問題,我挑選了其中的一些進行總結歸檔,希望對大家會有所幫助 1 如何定義高度很小的容器?在ie6下無法定義小高度的容器,是因為有乙個預設的行高。列舉2種解決方案 overflow hidden line height 0 2 下方出現幾...

fedora常見問題和解決方案

fedora作為linux主流發行版之一,大部分功能還是很讚的。只是在美觀性和其他一些細節上還是需要手工調整才有更加體驗。以下解決方案,使用fedora20 gnome3環境 eclipse中各種按鈕元件占用太多的空白空間,看起來臃腫不堪。解決方法 新增 gtkrc 2.0,內容如下 style g...

Redis 做快取常見問題和解決思路

概念 大量查詢不存在的key,短時間內對db造成巨大的查詢壓力。解決方案 1 布隆過濾 將存在的key置於bitmap中,訪問db之前過濾請求 2 將不存在的key,以空值的形式儲存在cache中,減少對底層db的壓力。3 資料庫限流 概念 熱點key過期,在短時間內對db造成的巨大壓力。解決思路 ...