IE7 по умолчанию элементы на 100% ширины - PullRequest
Новая
       11

IE7 по умолчанию элементы на 100% ширины

0 голосов
/ 06 марта 2009

У меня действительно неприятная проблема с веб-приложением, над которым я работаю (я изначально не писал его). Он использует рамки для макета достаточно страшно. У меня проблема в том, что все элементы с цветом фона и границей, установленной через CSS, по умолчанию имеют ширину 100%. Я только что проверил элементы div, элементы параграфа и т. Д.

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    #test {
        border:1px solid #ccc;
        background-color:#ddd;
    }
</style>
</head>
<body>
    <div id="test">
        Test information!
    </div>
</body>
</html>

Есть идеи?

Ответы [ 4 ]

7 голосов
/ 06 марта 2009

Я думаю, что это требуется HTML / CSS. Блочные элементы расширяют всю ширину, если нет возможности их остановить.

(FF ведет себя так же.)

4 голосов
/ 06 марта 2009

Это не потому, что элемент имеет фон или границу, которую он полностью расширяет с помощью родителя, а потому, что это блочный элемент. Фон или рамка просто позволяют увидеть, насколько велик элемент на самом деле.

Ширина по умолчанию на самом деле не "100%", а "auto". Практическое отличие состоит в том, что элемент, включающий границы, использует 100% ширины вместо ширины, за исключением того, что границы становятся 100% ширины (делая ширину, включая границы, шире, чем его родительский элемент).

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
    #test1 {
        float: left;
        border:1px solid #ccc;
        background-color: #ddd;
    }
    #test2 {
        float: left;
        clear: both;
        border:1px solid #000;
        background-color: #ccf;
    }
    </style>
</head>
<body>
    <div id="test1">
        Test information!
    </div>
    <div id="test2">
        Test information!
    </div>
</body>
</html>
2 голосов
/ 06 марта 2009

Как говорят Ричард и BeefTurkey, div - это блочные элементы, которые будут заполнять ширину браузера.

Вы можете использовать встроенный элемент, например, span 

<span id="test">
    Test information!
</span>

или добавьте некоторый стиль к вашему div, чтобы он стал встроенным 

div#test { display: inline; }
1 голос
/ 06 марта 2009

Разве divs по умолчанию не равен 100% (от размера родителей), потому что они блоки? Вы всегда можете попробовать изменить отображение на встроенное: #test {display: inline;}

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

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

...