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

StackOverflow https://stackoverflow.com/questions/618507

  •  03-07-2019
  •  | 
  •  

Вопрос

У меня действительно неприятная проблема с веб-приложением, над которым я работаю (изначально я его не писал). Он использует рамки для макета достаточно страшно. У меня проблема в том, что все элементы с цветом фона и границей, установленной через 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>

Есть идеи?

Это было полезно?

Решение

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

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

Другие советы

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

Ширина по умолчанию на самом деле не "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>

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

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

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

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

div#test { display: inline; }

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top