html5htmlcssinternet-explorer-7

Ошибка нижнего поля HTML / CSS в IE7

просмотры: 24.8K

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

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

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

  1. Обертывание формы или набора полей в div без стиля. Без видимых изменений.
  2. Убираем margin-bottom в таблице и вместо этого оборачиваем его с помощью div и устанавливаем padding-bottom на 19 пикселей. Без видимых изменений.
  3. Удаление margin-bottom в таблице и добавление div с фиксированной высотой 19 пикселей. Без видимых изменений.
  4. Ставим пробел между таблицей и набором полей.

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

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

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

Источник

Ответов (6)

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

Источник

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

<br style="clear:both;" />
Источник

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

Источник

Заменить 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>

Источник

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

Источник