在IE和Mozilla中保證金顯示方式不同

在IE和Mozilla中，保證金處理方式有何不同？因爲當我嘗試Mozilla 3.6正確顯示頁邊距，但IE 8將它拉得太遠。
這裏是我的代碼在IE和Mozilla中保證金顯示方式不同

<div id="searchCriteria"> 
<table width="100%" border="1" bordercolor="#64A4F5">  
</table> 
</div> 
<div id="searchResult"> 
</div>

這裏是我的CSS

#searchCriteria{ 
     height:24%; 
     width:100%; 
     float: right; 
     display: block; 
     font-family: 
     verdana,arial; 
     font-size: 12px; 
} 

#searchResult{ 
     height:70%; 
     width:100%; 
     float:right; 
     display:block; 
     margin-top:15px; 
     margin-bottom:5px; 
}

保證金和searchResult之間searchCriteria格是越來越拉伸IE，但在Mozilla工作的罰款。
（它看起來像在IE的一些空間來到table元素和searchCriteria div之間）

來源

2011-05-05 xyz

順便說一句，這是宋體，而不是vardana :-) – naivists 2011-05-05 07:27:16

感謝Naivists :) – xyz 2011-05-05 08:37:24

接着說：HEIGHT = 100％''到'

和工程:) – xyz2011-05-05 09:43:38

回答

增加了height=100%到<table>它工作。謝謝大家的建議:)

來源

2011-05-06 09:38:02 xyz

您是否正在使用樣式表重置？瀏覽器繼承的利潤率可能與您的設計衝突。

例如，

div, table, td, th, tr, { 
    margin : 0; 
    padding : 0; 
    border : 0; 
} 

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

這裏有一個鏈接更廣泛的CSS reset

也可能會有所幫助使用開發工具（F12在IE和Firebug擴展在Firefox）來解決這種差異在你的設計 - 如果您收集特定信息（例如，下載4像素），您將發現更好的更改來發現問題。

P.S.在使用百分比時要格外小心 - 像填充會增加百分比值，導致過量。實際上，我不確定您的border : 1與100％（導致100％+1像素）複合，但只是一個有用的提醒。

來源

2011-05-05 07:22:13 jlmakes

沒有試過運氣:( – xyz 2011-05-05 09:10:07

height:24%;

使用百分比值的任何特定原因？

無論如何，我認爲這可能是Quirks Mode。嘗試在文檔的開頭添加<!DOCTYPE html>以查看它是否有幫助。

來源

2011-05-05 07:25:26 xfix

沒有它的標準模式，我已經添加了<！DOCTYPE html PUBLIC「 - // W3C // DTD HTML 4.01 // EN」「http://www.w3.org/TR/html4/strict .dtd「>' – xyz 2011-05-05 08:50:32

我測試了你的代碼在FF 3.6.13，IE7-8。我只是在IE瀏覽器中以怪癖模式觀察了這個問題，這可能意味着你不是在使用Doctype declration或者在怪癖模式下使用IE。如果您使用XHTML使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>An XHTML 1.0 Strict standard template</title> 
    <meta http-equiv="content-type" 
     content="text/html;charset=utf-8" /> 
</head> 

<body> 

    <p>… Your HTML content here …</p> 

</body> 
</html>

如果您使用HTML5使用：

<!DOCTYPE html>

對其他DOCTYPE聲明列表使用見this。

來源

2011-05-05 08:15:28 melhosseiny

它就在那裏。我添加了<！DOCTYPE html PUBLIC」 - // W3C // DTD HTML 4.01 // EN「」http://www.w3.org/TR/html4/strict。 – xyz 2011-05-05 08:51:30

我在'searchResult' div。 – xyz 2011-05-05 08:54:24

裏面使用了DHTMLX網格組件它看起來像IE中的表格元素和searchCriteria div之間有一些空間。雖然'searchCriteria'和'searchresult'之間的邊距沒有問題在我E. – xyz 2011-05-05 09:12:41

添加第二個邊距聲明你的信息搜索結果的div像這樣：

margin-top:10px\9;

這將只針對IE8及以下。改變像素的數量，直到它看起來對你好。

來源

2011-05-05 09:50:40 Krimo

相關問題