前端開發相容問題大全

2022-07-15 08:21:14 字數 4011 閱讀 5301

原文  

1、居中問題

div裡的內容,ie預設為居中,而ff預設為左對齊,可以嘗試增加**margin: 0 auto;

2、高度問題

兩上下排列或巢狀的div,上面的div設定高度(height),如果div裡的實際內容大於所設高度,在ff中會出現兩個div重疊的現象;但在ie中,下面的div會自動給上面的div讓出空間所以為避免出現層的重疊,高度一定要控制恰當,或者乾脆不寫高度,讓他自動調節,比較好的方法是 height:100%;但當這個div裡面一級的元素都float了的時候,則需要在div塊的最後,閉和前加乙個沉底的空div,對應css是:.float_bottom

3、clear:both;

不想受到float浮動的,就在div中寫入clear:both;

4、ie浮動 margin產生的雙倍距離

#box

2. ul和ol列表縮排問題消除ul、ol等列表的縮排時,樣式應寫成:

9、顯示類(display:block,inline)

1. display:block,inline兩個元素

display:block; //可以為內嵌元素模擬為塊元素

display:inline; //實現同一行排列的的效果

display:table; //for ff,模擬table的效果

display:block 塊元素,元素的特點是:

總是在新行上開始;高度,行高以及頂和底邊距都可控制;寬度預設是它的容器的100%,除非設定乙個寬度

,,,,和 是塊元素的例子

display:inline 就是將元素顯示為行內元素,元素的特點是:和其他元素都在一行上;高,行高及頂和底邊距不可改變;寬度就是它的文字或的寬度,不可改變。,,,,

,和 是 inline 元素的例子

2.滑鼠手指狀顯示

全部用標準的寫法 cursor: pointer;

10、背景、類

1. background顯示問題

全部注意補齊 width,height 屬性

2.背景透明問題

ie: filter: progid: dximagetransform.microsoft.alpha(style=0,opacity=60);

ie: filter: alpha(opacity=10);

ff: opacity:0.6;

ff: -moz-opacity:0.10;

最好兩個都寫,並將opacity屬性放在下面

11、min-height最小高度的實現(相容ie6、ie7、ff)

作用是:當容器的內容較少時,能保持乙個最小的高度,以免破壞了布局或ui設計效果。而當容器內的內容增加的時候,容器能夠自動的伸展以適應內容的變化。

#mrjin

15、box陰影(css3)

.box

16、sticky footer (讓頁尾永遠停靠在頁面底部,而不是根據絕對位置)

css:

* html, body, #wrap

body > #wrap

#main

#footer

.clearfix:after

.clearfix

* html .clearfix

.clearfix

17、iframe元素內嵌頁面如何去掉繼承的html及body背景色/背景

iframe元素的功能是在乙個文件裡內嵌乙個文件,建立乙個浮動的幀。內嵌文件時乙個完整的頁面,有html,body等屬性。這樣遇到了乙個問題,如果樣式表中對body定義過背景色/背景,那麼內嵌文件將全部繼承過來。所以如何去掉背景色和背景:

去掉背景色:filter:chroma(color=white);

舉例:去掉背景:

舉例:注意:內嵌頁面同時也要增加body屬性:

18、為什麼web標準中無法設定ie瀏覽器滾動條顏色了?

原來樣式設定:

解決辦法是將body換成html。

19、為什麼中火狐瀏覽器下文字無法撐開容器的高度?

標準瀏覽器中固定高度值的容器是不會象ie6裡那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設定呢?辦法就是去掉height設定min-height:200px; 這裡為了照顧不認識min-height的ie6 可以這樣定義:

div

20、如何定義1px左右高度的容器?

ie6下這個問題是因為預設的行高造成的,解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

21、怎麼樣才能讓層顯示在flash之上呢?

解決的辦法是給flash設定透明:

:22、怎樣使乙個div層居中於瀏覽器中?

23、怎樣使div背景透明?

首先,需要這兩個層都是兄弟關係,其次,這兩個層都需要絕對定位。舉個例子:

這裡很多的文字,這裡很多的文字,這裡很多的文字,這裡很多的文字,

blueidea,blueidea,blueidea

24、怎樣去掉選中時的虛線框?

利用onfocus="this.blur();"例如:測試

25、ie6下png背景顯示問題?

針對ie6下png背景顯示問題,css中可以這樣解決:_background:none;_filter:progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=crop, src=』

26、文字與表單對齊方法?

設定表單元素第一字型為tahoma(verdana系列也可),並設定vertical-align:middle.建設大家把這個約定寫入css reset中,能減小很多麻煩:

body,button,input,select,textarea

27、optgroup標籤的用法?

optgroup標籤,鮮為人知,它對提公升選擇表單使用者體驗很有幫助。就是可以在有很多選項時,對這些選項分組:例子:

one select

two select

three select

four select

28、文字與垂直居中對齊方法?

為與文字的共同父元素所有的後代元素定義*;例如:

我要的堅強

只需定義p*即可使文字與同行垂直居中.

29、文章標題列表中日期居右顯示的兩種方法?

方法a相對方法b省資源,但比方法b要多寫兩句**,使用時請視情況而定:

方法a:

這是文章標題2010-10-10

然後定義p和span的樣式:

pp span

方法b:

2010-10-10這是文章標題

然後定義span右浮動:

p span

30、ie6下max/min-width/height實現?

ie6下max/min-width/height實現,_width: expression_r(this.width >600 ? 「600px」 : true);,height同理.

31、空白外邊距互相疊加的問題?

一般通過新增透明邊框或者1px的內邊距避免;

其一,為外圍元素定義透明邊框.具體到本例,即在樣式div中加入border:1px solid transparent;

其二,為外圍元素定義內邊距填充..具體到本例,即在樣式div中加入padding:1px;

例如:空白邊距疊加[email protected]

32、網頁設計中的預設字型

font: 12px/1.5 tahoma, helvetica, arial, sans-serif;

說明:line-height採用1.5, 也就是18px. 這是**視覺規範中定義的行高,對於12px字型,這個行高看起來很舒服。font-family預設採用tahoma. tahoma是英文windows作業系統的預設字型,這個字型比較均衡,顯示中英文混排很不錯,是經久耐看的一款字型。

33、瀏覽器相容——常用的css hack

(1).title

(2).title

(3).title

*html.title

*+html.title

css相容問題大全

1.ie下div邊距增多問題 2.ie下div雙邊距問題 3.hack寫法 好的網頁是不需要寫hack的 4.解決ie不支援 min width和min height屬性 4.div浮動ie文字產生3象素的bug 5.ie捉迷藏的問題 當div應用複雜的時候每個欄中又有一些鏈結,div等這個時候容易...

前端開發 瀏覽器相容問題總結

ie8 以下版本不支援html5語義化標籤 現象 我是header標籤,我應該獨佔一整行header 解決方案 方案1 在瀏覽器解析標籤之前,動態建立一下 header 標籤,瀏覽器就認識了document.createelement header 方案2 預設行內,需要轉成塊級header 但是 ...

前端開發 瀏覽器相容問題(持續更新)

本文記錄的是個人開發過程中遇到的有關於瀏覽器相容的問題 持續更新 1.ie瀏覽器 1.1 css3中偽類選擇器的相容性問題 ie8及以下 對於一些 nth child n nth last child,last child,ie8並不支援,ie只支援 first child這個選擇器 解決方案 eg...