My<cod/>.net
IE7 HTML/CSS margin-нижняя ошибка
Вот такой сценарий:
У меня есть таблица с краем-дном 19px. Ниже у меня есть форма, которая содержит некоторые наборы полей. Один из них плывет прямо. Проблема в том, что маржинальное дно не получает полный 19px в IE7. Я прошел через все ошибки IE7 css/margin/float, которые я могу придумать, и попытался исправить их, но безуспешно. Я уже некоторое время гуглил и не могу найти ничего, что могло бы помочь.
Вот что я попробовал сделать.
- Обертывание формы или набора полей в unstyled div. Никаких видимых изменений.
- Nixing The margin-bottom on the table and instead wrapping that with a div and giving it a padding-bottom of 19px. Никаких видимых изменений.
- Никсирование нижнего края таблицы и добавление div с фиксированной высотой 19px. Никаких видимых изменений.
- Ставим клир между столом и полевым набором.
Я знаю, что есть еще некоторые вещи, которые я забываю, но это те вещи, которые я недавно опробовал. Это происходит с каждым набором полей.
Я использую таблицу стилей сброса и имею xhtml переходный doctype.
Edit: у меня также есть панель инструментов IE7 web developer и Firebug. Информация о стиле для обоих браузеров говорит, что у него есть нижний край: 19px; но это явно не для IE7.
Заменить margin-bottom: 19px; на <div/> на height: 19px .
Удалите стиль CSS для margin-bottom и вставьте <div/> с height: 19px между <table/> и <form/>
Это решило эту проблему в моем случае.
<table id="mytable">
<tr>
<th>Col 1</th>
<th>Col 3</th>
<th>Col 2</th>
</tr>
<tr>
<td>Val 1</td>
<td>Val 2</td>
<td>Val 3</td>
</tr>
</table>
<div style="height:19px;"></div>
<form method="post" action="test.html" id="myform">
Я собрал воедино то, что вы там описали, и это правильно для меня передано. Вполне вероятно, что у вас где-то есть другой стиль, который оказывает влияние на вашу форму или ваш стол. Если вы еще не делаете этого, то использование файла reset.css чрезвычайно полезно. Если вы хотите увидеть, какие стили влияют на конкретный элемент, на панели инструментов веб-разработчика для firefox есть удобная команда информации о стиле для просмотра того, какие стили (из каких файлов/блоков стилей/встроенных стилей) применяются к нему. Вы можете активировать его, нажав Ctrl+Shift+Y или нажав CSS -> View Style Information
Вот код, который работал для меня в IE7:
<!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" />
<title>Test</title>
<style>
#mytable {
margin-bottom: 19px;
border: solid green 1px;
}
#myform {
border: solid red 1px;
overflow: hidden;
}
#floaty {
float: right;
border: solid blue 1px;
}
</style>
</head>
<body>
<table id="mytable">
<th>Col 1</th>
<th>Col 3</th>
<th>Col 2</th>
<tr>
<td>Val 1</td>
<td>Val 2</td>
<td>Val 3</td>
</tr>
</table>
<form method="post" action="test.html" id="myform">
<fieldset id="floaty">
<label for="myinput">Caption:</label>
<input id="myinput" type="text" />
</fieldset>
<fieldset>
<p>Some example content</p>
<input type="checkbox" id="mycheckbox" />
<label for="mycheckbox">Click MEEEEE</label>
</fieldset>
</form>
</body>
</html>