Проблема с перекомпоновкой Webkit при динамическом изменении границы элемента DOM

Question

У меня есть два элемента div, где один оборачивается вокруг другого.Затем я использую JavaScript, чтобы добавить границу к внешнему элементу во время выполнения.Каким-то образом браузер на основе webkit не выполняет перекомпоновку при изменении внешней границы.Конечный результат выглядит ужасно - внутренний div переполняет внешний.Вот HTML-код: [div id = "external" [div id = "inner" style = "border: solid blue;height: 50px; "] [/ div] [/ div]

Обработчик событий также прост: document.getElementById (" external "). setAttribute (" style "," border: solid green ")

Я не мог поверить, когда узнал об этом, потому что это такая тривиальная задача перекомпоновки. Или я что-то упустил? Кто-нибудь сталкивался с подобной проблемой, какой обходной путь? Спасибо.

Answer 1

Если вы установили внешнее и внутреннее значение на float: left, оно будет работать как запланировано. Однако вам нужно будет либо указать фиксированную ширину, либо содержимое внутри div (inner).

#outer { float: left;}
#inner { float: left;}

[div id = "external"] [div id = "inner"] Текст [/ div] [/ div]

Answer 2

border: solid green Не указано любой размер, например: "border:1px solid green"

Я не думаю, что безопасно сбросить весь атрибут style, потому что вы можете испортить некоторые другие вещи. Попробуйте добавить класс к className, что немного чище.