Проблема маржинальности CSS - PullRequest
Новая
       0

Проблема маржинальности CSS

0 голосов
/ 31 января 2011

РЕДАКТИРОВАТЬ: мой вопрос был неясным, так что это просто для пояснения.

20px оставленное поле перемещает div в общей сложности на 20px, но элемент управления вводом перемещается в общей сложности на 40px.

ОРИГИНАЛЬНЫЙ ВОПРОС:

Следующий скрипт - это весь скрипт, у меня нет другого скрипта / стиля, прикрепленного к скрипту ниже: 

<!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>
        <title>Untitled Page</title>
    </head>
    <body>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text"/>
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
    </body>
</html>

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

Например: 

<!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>
        <title>Untitled Page</title>
    </head>
    <body>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 20px;border:1px black solid;">
            <input type="text"/>
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
    </body>
</html>

Почему это происходит?

Я тестирую в Internet Explorer 8 в режиме Internet Explorer 7.Я проверил его в Internet Explorer 8, используя стандартный режим Internet Explorer 8, и он отлично работает.

Ответы [ 2 ]

3 голосов
/ 31 января 2011

Это выглядит как странное проявление ошибки двойного поля с плавающей точкой.Размещение display: inline в атрибуте style вашего первого div остановит удвоение полей в старых версиях IE.

Однако, как уже говорили другие, я бы создал классы.Это держит вещи в порядок.

2 голосов
/ 31 января 2011

Вы, кажется, не понимаете, как работают поля. Когда вы добавляете левое поле к текстовому документу (как в MS Word), вы смещаете содержимое бумаги вправо на полях, тем самым отодвигая его от края страницы.

Когда вы добавляете левое поле к элементу в CSS, вы делаете то же самое. Вы говорите браузеру, чтобы он имел n пространства от элемента уровня блока слева, независимо от того, является ли это краем страницы или другим элементом div. Все содержимое элемента, к которому вы добавили поле, сохраняет свою позицию относительно своего родителя; в вашем случае это означает, что input движется, когда div движется.

Кроме того, это может быть просто проблема с транскрипцией, но вы добавили поля размером 20px в bottom первого div, а не в left , как вы упоминали.

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

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

...