日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

IE6,IE7,IE8 css bug搜集及瀏覽器兼容性問題解決方法匯總( 六 )

云知道


div{background:#000;margin:10px;}
div p{background:#f60;margin:15px}

這是一個div元素內(nèi)嵌套p的簡單樣例,先別復(fù)制保存為html測試,在你看完上面的代碼后,你是否以為它出為你呈現(xiàn)如下圖的效果?
好,現(xiàn)在你可以復(fù)制上面代碼,保存到本地,然后在瀏覽器中打開.你會驚訝的發(fā)現(xiàn),它呈現(xiàn)給你的效果是這樣的:
為什么會這樣呢?按CSS中,對于有塊級子元素的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離.故,子元素的頂部和底部空白邊就突出到元素的外圍了.p元素的15px外邊距與div元素的10px的外邊距形成一個單一的15px垂直空白邊,另外,形式的這個空白邊并非為div所包圍,而是呈現(xiàn)在div的外圍.所以,我們看到了第二張效果圖.
如何解決?本人比較推薦兩種解決方式:
其一,為外圍元素定義透明邊框.具體到本例,即在樣式div中加入border:1px solid #ddd;
其二,為外圍元素定義內(nèi)邊距填充..具體到本例,即在樣式div中加入padding:1px
另外,還可以通過外圍元素絕對定位,或者定義子元素浮動等方式實現(xiàn).
30：純css解決多行文字垂直居中

復(fù)制代碼代碼如下:
style type="text/css"
.alert{
width:400px;
height:250px;
display:table-cell;
vertical-align:middle;
line-height:1.5em;
border:1px solid red;
}
.alert_blank{
height:100%;
width:0;
display:inline;
vertical-align:middle;
zoom:1;
}
.alert_con{
width:100%;
zoom:1;
display:inline;
vertical-align:middle;
}
/style
div class="alert"
div class="alert_con"哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～哥乃多行文字垂直居中～/div
/div

其大概原理為：第一個alert_blank容器，display:inline以后作為行內(nèi)元素，它的高度為100%，寬度卻為0，相當(dāng)于緊貼外層容器左邊框的一條透明的線，這樣就使得外層容器里面只存在一行 。外層容易的vertical-align:middle使得其內(nèi)部相當(dāng)于一行文字垂直居中 。真正盛放內(nèi)容的div也是display:inline，它對外和blank垂直居中，只要內(nèi)部文字不超過blank的高度，這個效果將是完美的 。雖然從語義化上講，用空白div布局說不太過去，但是瑕不掩瑜 。另：zoom:1是為了觸發(fā)hasLayout 。
31:關(guān)于flash遮蓋div浮動層
(a) place Flash embed script in div container (I use SWFObject.js)[將flash嵌入腳本放到一個div容器中]
(b) add wmode=transparent to Flash embed script[增加wmode=transparent 到flash嵌入腳本]
(c) set div id=flashcontent container with z-index:-1; [將外層容器的z-index設(shè)置為-1]
(d) set body tag with style .. position:relative;left:0px;top:0px;z-index:0;
(otherwise Firefox does not accept negative z-index)
(e) set floating iframe in container with z-index: 99;[將浮動的iframe在容器中的zindex設(shè)置為99]
(f) use CSS to position flashcontent and htmlcontent containers.[使用css來調(diào)整flash容器和html容器的位置]
其他方案網(wǎng)上比較多見,不做闡述.在此說下使用第一個方案如何解決:
var so = new SWFObject(XXX.swf, flashId, 寬度, 高度, 版本, 背景色);
//設(shè)置flash不遮蓋div層
so.addParam(wmode, opaque);
so.write(flashcontent);
如此設(shè)置即可讓flash無法遮蓋住div
32:如何處理ie6的文字行高
ie6下漢字就會顯示偏上位置，而在標(biāo)準(zhǔn)瀏覽器中不存在這個問題字體 Tahoma,試下
不過如果有規(guī)定第一個字體是用啥的，那就只能忽略這個問題..我終于明白淘寶為啥把Tahoma字體放到第一位了

復(fù)制代碼代碼如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

推薦閱讀