Маржа отображается по-разному в IE и Mozilla - PullRequest
Новая
       30

Маржа отображается по-разному в IE и Mozilla

0 голосов
/ 05 мая 2011

По-разному ли обрабатывается маржа в IE и Mozilla?Потому что, когда я попробовал Mozilla 3.6 правильно отобразить поле, но IE 8 слишком сильно его растянул.
Вот мой код 

<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; 
}

Поля между searchCriteria и searchResult div растягивается в IE, но нормально работает в Mozilla.
(Похоже, в IE некоторое пространство находится между элементом table и searchCriteria div)

Ответы [ 5 ]

2 голосов
/ 05 мая 2011

Я проверял ваш код в FF 3.6.13, IE7-8.Я наблюдал проблему только в режиме quirks в IE, что, вероятно, означает, что вы либо не используете декларацию Doctype, либо используете IE в режиме quirks.Если вы используете 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>

См. this для получения списка других объявлений Doctype дляиспользовать.

1 голос
/ 05 мая 2011 
height:24%;

Есть ли какая-либо определенная причина для использования процентных значений?

Во всяком случае, я думаю, что это, вероятно, Причудливый режим . Попробуйте добавить <!DOCTYPE html> в начале документа, чтобы увидеть, поможет ли это.

0 голосов
/ 06 мая 2011

Добавлено height=100% в <table>, и это работает. Спасибо всем за ваши предложения :)

0 голосов
/ 05 мая 2011

Добавьте второе объявление margin-top в ваш div searchResult следующим образом: 

margin-top:10px\9;

Это будет предназначаться только для IE8 и ниже. Изменяйте количество пикселей до тех пор, пока оно не будет хорошо выглядеть.

0 голосов
/ 05 мая 2011

Используете ли вы сброс таблицы стилей? Возможно, унаследованные браузером поля конфликтуют с вашим дизайном.

Например. 

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

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

Вот ссылка на более обширный CSS reset

Также может быть полезно использовать инструменты разработчика (F12 в IE и расширение Firebug в Firefox) для устранения расхождений в вашем дизайне - если вы соберете конкретную информацию (например, 4px не учтены), вы будете лучше разобраться в проблеме.

P.S. Будьте особенно осторожны при работе с процентами - что-то вроде заполнения будет составлять процентные значения, что приведет к перерасходу. Я на самом деле не уверен, что ваши border : 1 соединения со 100% (в результате 100% + 1px,), но просто полезное напоминание.

...