IE7 HTML / CSS маржинальная ошибка

Вот сценарий:

У меня есть таблица с полем 19px. Ниже у меня есть форма, которая содержит несколько наборов полей. Один из них всплыл прямо. Проблема в том, что в IE7 маржинальное дно не получает полных 19 пикселей. Я прошел через все ошибки IE7 css / margin / float, о которых я могу думать, и попробовал исправить, но безуспешно. Я уже некоторое время гуглю и не могу найти ничего, что могло бы помочь.

Вот что я попробовал.

  1. Обтекание формы или набора полей в простом div. Нет видимых изменений.
  2. Обрежьте маржинальное дно на столе и вместо этого оберните его div и дайте ему отступ в 19px. Нет видимых изменений.
  3. Закрепление поля на полях и добавление div с фиксированной высотой 19px. Нет видимых изменений.
  4. Помещение поля между таблицей и полем.

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


Я использую таблицу стилей сброса и XTML переходного типа документа.

Изменить: У меня также есть панель инструментов для веб-разработчиков IE7 и Firebug. Информация о стиле для обоих браузеров говорит о том, что у нее есть margin-bottom: 19px; но это явно не для IE7.

18.08.2008 22:35:42
6 ОТВЕТОВ

У вас есть действительный тип документа? В противном случае IE7 рендерится в режиме причуд, который в основном IE5.5

1
18.08.2008 23:09:59

Я собрал то, что вы описали там, и это правильно для меня. Вероятно, у вас есть другой стиль, который влияет на вашу форму или таблицу. Если вы этого еще не сделали, использование файла 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>

1
29.08.2019 10:35:10
Отклонено, потому что возникла та же проблема с плавающим элементом и его полем в IE7 (но он хорошо работает в любом другом браузере), поэтому я полагаю, что проблема законна, вопреки вашему заключению. См. Ошибку
Arturas Smorgun 25.03.2010 08:54:14

Я не знаю наверняка без тестирования, но попробуйте поместить это между таблицей и набором полей:

<br style="clear:both;" />
0
19.08.2008 00:07:23
Никогда не используйте breaks ( <br />) для очистки. Используйте div- это более семантически точно.
Matt Kocaj 29.11.2009 09:18:19
Аргументируется, так как <br> означает «перевод строки», а <div> просто бессмысленен.
Kevin 29.11.2009 19:19:24
<div> не бессмысленно. Большинство всех [должны] знать, что у div есть встроенный разрыв строки. В любом случае, я бы не стал добавлять стили в <br>.
08Hawkeye 17.11.2010 17:20:06

Если вы удалите число с плавающей точкой из элемента под таблицей, появится ли поле?

1
21.08.2008 03:01:45

если у вас есть плавающие и не всплывающие элементы, единственный надежный способ обеспечить вертикальное пространство между ними в кросс-браузерном режиме - это заполнение сверху следующего элемента.

2
11.04.2011 02:39:40
Я смог исправить проблему, используя float для обоих пунктов выше и ниже. Этот ответ заставил колеса вращаться.
Ninja Fist 27.04.2012 21:54:53

Заменить 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">
2
1.06.2013 02:22:42
Да ладно, конечно, нам не нужно прибегать к этому.
mattalxndr 26.12.2013 21:52:28