#javascript #jquery #css #xhtml #jquery-ui-accordion
#javascript #jquery #css #xhtml #jquery-ui-accordion
Вопрос:
Я разработал веб-сайт, который состоит из «тела», «контейнера» для хранения и центрирования «содержимого» div на странице. Высота разделов «содержимое» и «контейнер» установлена на 100%, я также добавил скрипт jQuery Accordian в div «содержимое». Теперь в Google Chrome, когда я активирую div, который использует скрипт jQuery Accordian, он отображает div, как и ожидалось. Страница увеличивается в высоту и следует атрибуту height: 100%, который закодирован во внешней таблице каскадных стилей. Но (вот в чем проблема) в Google Chrome это добавляет дополнительное пространство под «контейнерным» div, и это показывает проблему в кодировании, будь то в XHTML 1.0 Strict или в документе CSS. Или это может быть в JavaScript.
Как XHTML 1.0 Strict, так и CSS проверены, за исключением одной ошибки в документе XHTML, который уже был исправлен без повторной загрузки его на сервер, что никак не влияет на проблему.
Указанный jQuery Accordian Div расположен там, где указано изображение «Нажмите, чтобы запросить».
Вы можете просмотреть страницу по адресу:http://www.noxinnovations.com/portfolio/thecommonwealth/index.html
Вы можете просмотреть css по адресу:http://www.noxinnovations.com/portfolio/thecommonwealth/style.css
Вы можете просмотреть JavaScript по адресу:http://www.noxinnovations.com/portfolio/thecommonwealth/javascript.js
Если у вас нет Google Chrome и / или вы используете Internet Explorer, Opera, Apple Safari и / или Mozilla Firefox. Вы можете просмотреть проблему, с которой я столкнулся, в виде изображения
Посмотрите под красным, а затем на черное прямо под ним. Отсюда и дополнительный интервал.
Я был бы очень признателен, если бы кто-нибудь помог мне с этой проблемой, большое вам спасибо, Аарон Брюер
Комментарии:
1. 1 за хорошее описание. Честно говоря, я не уверен, почему вы думаете, что вам нужен атрибут 100% height. Ваш контент требует прокрутки, что делает все это спорным вопросом. Что происходит при удалении
height: 100%;?2. Кроме того, я еще раз настоятельно подчеркиваю, что вы приводите HTML в полное соответствие, даже если это не имеет значения для этой проблемы. Тот факт, что это работает во всех браузерах, включая Safari (Webkit), но не в Chrome (Webkit), очень странен.
3. @Sparky672: Спасибо за репутацию 1. Я хочу, чтобы высота составляла 100%, поскольку, когда содержимое в контейнере заканчивается, фон все равно будет заканчиваться в нижней части окна. Я удалил его, и он вообще ничего не изменил, lol. По-прежнему не работает.
4. @Spary672: Теперь документ XHTML и документ CSS полностью соответствуют требованиям. Возможно, у меня может быть плохо закодированный скрипт jQuery?
5. Смотрите мой комментарий к принятому ответу.
Ответ №1:
Понятия не имею, в чем проблема, не потратил достаточно времени, чтобы разобраться. Хотя это исчезает, когда я добавляю следующее в css
#wrapper {overflow:auto}
Не уверен, насколько удовлетворяет «это решает проблему без объяснений» 🙂
Комментарии:
1. @davin: Большое вам спасибо, я очень ценю решение. Я не знаю, как это могло устранить проблему, но, как вы сказали, это так… и я этим вполне доволен. лол. Спасибо.
2. @Aaron, очень приятно. Я надеюсь, что макет продолжает вести себя хорошо.
3. Я думаю, что это комбинация вещей. Во-первых, высота 100% описывает размер относительно контейнера… в данном случае окно. Вы говорите, что хотите, чтобы оно составляло 100%, но фактическое содержимое больше похоже на 300% от размера окна. Каким-то образом
overflow:auto;преодолевает все, что Chrome не нравится в этой части вашего кода. Кроме того, я считаю, что «auto» — это поведение «overflow» по умолчанию, поэтому, возможно, вы просто нашли здесь особенность Chrome.4. @Sparky, это не так, по умолчанию это
visible, видишь w3.org/TR/CSS2/visufx.html#overflow5. @davin. Спасибо. Конечно, странно, что Chrome был единственным, что отображало это по-другому.