Что-то в CSS вызывает горизонтальную прокрутку в IE6 - PullRequest
0 голосов
/ 04 декабря 2011

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

В основном CSS ниже отображается так, как ожидается в FF / Chrome / IE8, но не в IE6 (и кто знает о других версиях IE). В IE6 прокручиваемая горизонтальная полоса прокрутки продолжает отображаться, поскольку некоторые элементы переполняют окно браузера. Мое чтение, кажется, указывает, что это как-то связано с заполнением, 100% -ная ширина - проблема с IE6, или что-то ... Я добавил цвета bg, чтобы лучше визуализировать проблему.

Я действительно хочу, чтобы # ch / div ("head") заполнял окно браузера горизонтально. Я полагаю, что все сводится к следующему: почему элементы div для bs_ext и cd выходят за пределы правого окна браузера, вызывая отображение горизонтальной полосы прокрутки?

<head>
<style>
<!--
body{margin:0px 0px 0px 0px}

#ch,#cs{position:relative;width:100%}
#ch{margin-top:0px;height:90px;background-color:#edeff4;border-bottom:1px solid 
#dddddd}
#cs{height:55px;width:1024px;border-bottom:1px solid #dddddd}
#cb{width:1024px}
#ci{float:left;width:200px;background-color:#efefef}
#cr{float:left;width:530px;background-color:#cccccc}
#cd{float:left;width:294px;background-color:#dddddd}

#bs{position:relative;float:left;top:18px;left:15px;width:185px;background-
color:#cccccc}
#bs_ext{position:relative;float:left;top:18px;left:15px;width:824px;background-
color:#dddddd}

-->
</style>
</head>
<body>
<div id=ch>head</div>
<div id=cs>
    <div id=bs><span>sssssss</span></div>
    <div id=bs_ext><span>ppppppp</span></div>
</div>
<div id=cb>
<div id=ci>111<br>111<br>111<br></div>
<div id=cr>222<br>222<br>222<br></div>
<div id=cd>333<br>333<br>333<br></div>
</div>
</body>

Буду признателен за любые советы о том, как заставить это работать в IE6.

Кроме того, я бы хотел, чтобы нижняя граница #cs всегда была на 100% браузером (сейчас это 1024px). Но если я использую «100%», то при изменении размера браузер перемещает «ppppppp» вниз - я бы хотел, чтобы это было исправлено, чтобы изменение размера браузера не изменило позицию содержимого.

Большое спасибо за любые указания / помощь

Ответы [ 3 ]

2 голосов
/ 04 декабря 2011

Я бы не стал делать свой веб-сайт совместимым с IE6.

IE6 более 10 лет, вам следует потратить время на проверку кода в новых браузерах.

Если вы настаиваете на том, чтобы сделать его совместимым с IE6, вам следует изучить возможность использования разных таблиц стилей для разных браузеров..

Проверьте эту ссылку: http://www.thesitewizard.com/css/excludecss.shtml

0 голосов
/ 04 декабря 2011

Чтобы удалить полосу прокрутки, вы можете присвоить это свойство #CS {overflow: visible;}, это может решить проблему полосы прокрутки IE6.

Как упомянуто BVD, вы не должны проверять совместимость в IE6, вы должны установить последние версии IE, т.е. IE9. IE9 предоставляет Developer Tool , который позволяет вам проверить html-страницу на совместимость с IE7, IE8 и IE9. Вы должны игнорировать IE6 и сосредоточиться на совместимости начиная с версии IE7 и далее. Чтобы понять, какие браузеры популярны, проверьте NetMarketShare

Соглашения об именах, которые вы использовали для Div, неверны, проверьте эту статью, это может помочь вам понять, о чем я говорю Соглашения об именах CSS .

0 голосов
/ 04 декабря 2011

Краткий ответ:

  • bs_ext имеет ширину 824 пикселя, поэтому любой браузер (не только IE6) будет отображать полосу прокрутки, если размер браузера становится меньше, чем
  • cd расположен на 200 + 530 пикселейслева и имеет ширину 294 пикселя, что означает, что он расширяется до 1024 пикселя, что слишком широко (любой браузер использует около 16 пикселей ширины окна, чтобы использовать его для вертикальной полосы прокрутки)

Также:

  • Пойдите с предложением bvd;не пытайтесь оптимизировать под IE6 слишком много
  • Попробуйте создать сайт в IE6 сначала и в современных браузерах позже.

Решения:

Следующий CSS будетудалите все полосы прокрутки в html / теле вашей страницы.Ужасное исправление, поскольку вы уничтожаете инструменты пользователя для навигации по сайту:

html, body { overflow: hidden }

Кроме того, если вы хотите, чтобы нижний колонтитул прилипал к нижней части страницы (я не уверен, что вы делаетено это выглядит так), попробуйте следовать этому уроку:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Наконец, если вам нужна дополнительная помощь, я предлагаю вам опубликовать изображение или дизайн того, что вы пытаетесьдостигать.Многое возможно в IE6, если вы знаете, как обойти недостатки CSS, которые имеет браузер.

Последний совет - modernizr: http://www.modernizr.com/ Modernizr решает множество проблем IE6, но не все.Кроме того, у вас будет зависимость JavaScript на вашем веб-сайте, которая затронет как минимум пользователей IE6 и 7.

Удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...