IE7 отображает незапрошенное вертикальное пространство - PullRequest
Новая
       12

IE7 отображает незапрошенное вертикальное пространство

1 голос
/ 08 мая 2011

Посмотрите на этот HTML-код. В IE7 он отображает две строки в форме таблицы, почти такие же, как в Firefox 3.x, 4 и Chrome Теперь раскомментируйте "<! - div> abc </ div ->" и посмотрите снова. Теперь расстояние между рядами стало намного больше, около 1em. Я понятия не имею, откуда это взялось и как я мог бы избежать этого. Мне нужно выше таблицы для отображения текста. Эффект остается прежним, если вы замените

на

. 

<!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" xml:lang="en" lang="en"><head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">

body {
}
body, table, div {
    font-family: Arial, Helvetica, Swiss, Sans-Serif;
    font-size: 10pt;
    padding: 0;
    margin: 0;
}
div#body {
    position: relative;
    margin: auto;
    height:670px;
    width:1000px;
    margin-bottom: 10px;
    padding-bottom: 10px;

    background-color:white;
    overflow: hidden;

}

div.table {
    margin: 0;
    display: table;
}
div.tr {
    margin: 0;
    display: table-row;
    clear: both;
}
div.td {
    margin: 0;
    display: table-cell;
    float:left;  
}
div.left {
    width:150px;
}
div.right {
    width: 180px;
}

input, select {
    border: 0;
    border-right: 1px solid green; 
    border-bottom: 1px solid green; 
    background-color: #CAEBC9;
}
input.submit {
    border-top: 1px solid green; 
    border-left: 1px solid green; 
    border-right: 1px solid green; 
    border-bottom: 1px solid green; 
    background-color: #CAEBC9;
}
div#content {
    font-size: 10pt;
}
div#contentbody, div#prevnext {
    position: absolute;
    left:180px;
    width: 460px;
    padding-left: 30px;
    padding-right: 20px;
}
div#contentbody {
    top:95px;
    height:500px;
    padding-top: 0px;
    overflow: auto;
}


</style></head>
<body>
    <div id="body" style="">
        <div id="contentbody">

            <!--div>
                abc
            </div-->
<form id="form1" method="post" action="">
<div class="tr">
  <div class="td left">Datum</div>
  <div class="td right">
    <input id="input_date" name="date" value="-- date --" type="text"/>
  </div>
</div>
<div class="tr">
<div class="td left">Anzahl der Stühle</div>
<div class="td right">
<select name="anzahl_stuehle">
<option selected="selected" value="1">weniger als 2</option><option value="2">2 bis 4</option><option value="3">5 bis 6</option><option value="4">mehr als 6</option></select>
</div>
</div></form>
            </div>
    </div>

</body></html>

1 Ответ

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

Это вызвано стилем DIV.TR со следующей строкой: 

display: table-row;

Afaik IE7 не поддерживает эту настройку. Вы можете изменить его на: 

display: inline-block;

Это, по крайней мере, удалит пробел, который вы упомянули.

...