Я пытаюсь изменить HTML-страницу (с большим количеством CSS). Существует <table>, который является "слишком широким". Я не понимаю, почему он широк. Один из его подносов должен иметь какое-то правило width: $A_BIG_NUMBER; css, которое делает его широким, что затем проталкивает и делает все в целом.
Мой обычный подход состоит в том, чтобы вручную просмотреть все элементы (или те, которые я считаю ответственными), чтобы попытаться найти это правило css.
Есть ли более простой способ?
Я немного сталкиваюсь с этими "загадочными" проблемами ширины - особенно когда пытаюсь изменить тему с открытым исходным кодом, где я не являюсь автором большей части кода.
Попробуйте добавить несколько каркасов в ваш 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 */
Если вы используете Chromium, просто щелкните правой кнопкой мыши, выберите "Проверить элемент" (или что-то еще, его "Элемент überprüfen" в немецкой версии). Впоследствии открывается "инспектор". Там вы можете выбрать тег таблицы. Справа вы найдете список с признанными инструкциями CSS, в том числе. имена файлов. (Это немного похоже на Firebug для Firefox, намного быстрее.)
Это была очень хорошая статья для определения элемента, который переполнен на веб-сайте. Код 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/