IE7 HTML / CSS маржинальная ошибка - PullRequest
Новая
       38

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

8 голосов
/ 19 августа 2008

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

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

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

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

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

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

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

Ответы [ 6 ]

2 голосов
/ 07 ноября 2012

Заменить 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 голосов
/ 11 апреля 2011

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

1 голос
/ 21 августа 2008

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

1 голос
/ 19 августа 2008

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

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

0 голосов
/ 19 августа 2008

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

<br style="clear:both;" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...