Margin displayed differently in IE and Mozilla_问答_开发者

Margin displayed differently in IE and Mozilla

开发者 https://www.devze.com 2023-03-02 19:00 出处：网络

Is margin treated differently in IE and Mozilla ? Because when I tried Mozilla 3.6 displaying margin correctly but IE 8 stretching it too far.

Here is my code

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

Here is my css

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

#searchResult{  
        height:70%;  
        width:100%;  
        float:right;  
     开发者_Go百科   display:block;  
        margin-top:15px;  
        margin-bottom:5px; 
}

Margin between searchCriteria and searchResult div is getting stretched in IE but working fine in Mozilla.

(It looks like in IE some space is coming between table element and searchCriteria div)

I tested your code In FF 3.6.13, IE7-8. I observed the issue only in quirks mode in IE, which probably means that you're either not using a Doctype declration or using IE in quirks mode. If you're using XHTML use:

<!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>

If you're using HTML5 use:

<!DOCTYPE html>

See this for a list of other Doctype declarations to use.

height:24%;

Any certain reason to use percent values?

Anyway, I think it's probably Quirks Mode. Try adding <!DOCTYPE html> at beginning of document to see if it'll help.

Are you using a stylesheet reset? It's possible browser-inherited margins are conflicting with your design.

Eg.

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

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

Here's a link to a more extensive CSS reset

It also may be helpful to use the developer tools (F12 in IE, and the Firebug extension in Firefox) to troubleshoot the discrepancy in your design--if you gather specific information (eg. there's 4px unaccounted for,) you will have a better change at spotting the problem.

P.S. Be extra careful when working with percentages--something like padding will compound the percentage values, resulting in overages. I'm actually not sure if your border : 1 compounds with 100% (resulting in 100% + 1px,) but just a helpful reminder.

Add a second margin-top declaration to your searchResult div like so :