Узнайте, какие элементы HTML заставляют страницу/блок/раздел быть широкими/высокими

Я пытаюсь изменить HTML-страницу (с большим количеством CSS). Существует <table>, который является "слишком широким". Я не понимаю, почему он широк. Один из его подносов должен иметь какое-то правило width: $A_BIG_NUMBER; css, которое делает его широким, что затем проталкивает и делает все в целом.

Мой обычный подход состоит в том, чтобы вручную просмотреть все элементы (или те, которые я считаю ответственными), чтобы попытаться найти это правило css.

Есть ли более простой способ?

Ответы

Ответ 1

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

Попробуйте добавить несколько каркасов в ваш CSS. Используйте это в дополнение к использованию веб-инспектора разработчика, чтобы найти виновника (safari, IE, chrome - теперь все поставляются с инструментами разработчика из коробки, firebug для firefox).

body { margin: 30px; }
/* Optional: Add some margin to the body to add space and 
see where your offending elements cross the line */

body * { border: 1px solid red; }
/* add a border to all other elements on the page */

body * { outline: 1px solid red; }
/* Alternate: add an outline  to all elements on the page. Won't effect box model */

div#offending-area * { outline: 1px solid red; }
/* If you've got some idea about where the issue is, drill down further than the body tag */

Ответ 2

Если вы используете Chromium, просто щелкните правой кнопкой мыши, выберите "Проверить элемент" (или что-то еще, его "Элемент überprüfen" в немецкой версии). Впоследствии открывается "инспектор". Там вы можете выбрать тег таблицы. Справа вы найдете список с признанными инструкциями CSS, в том числе. имена файлов. (Это немного похоже на Firebug для Firefox, намного быстрее.)

Ответ 3

Это была очень хорошая статья для определения элемента, который переполнен на веб-сайте. Код JavaScript ниже для этого,

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Проверьте эту ссылку, https://css-tricks.com/findingfixing-unintended-body-overflow/