Абсолютно позиционированный DIV несовместим в разных браузерах

У меня проблема с абсолютно позиционированным DIV - он не находится в одном и том же месте в разных браузерах. Проблема в том, что большая часть моего контента создается файлом JSP, и мне приходится применять CSS и создавать свой контент в CMS вне этого файла. Вот как устроен код:

                <div id="automatic-container">
                 <div class="one">
                 <div class="oneWeird"></div>
                 <div id="content-container">
                     <div id="some-content1"></div>
                     <div id="some-content2"></div>
                 </div>
                <div id="absolutely-position">plain text is inserted here via JSP file, wrapped only in div tags. adding/styling p tags does not help</div>  
                </div>
                </div>

Все, кроме «контейнера содержимого», автоматически создается файлом JSP. Контент в div с «абсолютной позицией» должен располагаться поверх контента в «контейнере с контентом» и располагаться в определенном месте. oneWeird - это div, созданный JSP, который, кажется, не служит никакой цели, насколько я могу судить...

Я применил следующий CSS, и абсолютная позиция DIV отключена на несколько пикселей в каждом браузере (я проверил Chrome, IE7,8,9, FF, Safari). Он совпадает в Chrome, Safari и IE8. В FF он выше примерно на 3 пикселя, в IE9 — на 5 пикселей, а в IE7 — ниже примерно на 10 пикселей.

                #automatic-container{position: relative; padding: 0px; margin: 0px auto;}
                #automatic-container div.one {position: relative; padding: 0px; margin: 0px auto;}
                #automatic-container div.one div.oneWeird{display: none;}
                #content-container{margin: 0px auto; width: 848px; height: 354px; background:url('bkg_confirm.jpg') no-repeat; font-family: Helvetica,Arial,sans-serif; position: relative; padding: 0;}
                #some-content1{position: relative; margin: 0px; text-align: center; padding: 0; width: 490px; height: 354px; left: 343px; top: 30px;}
                #some-content2 {position: relative; width: 490px; height: 55px; border-top: 1px solid #cccccc; padding: 0px; margin: 60px 0 0 0; overflow:hidden;}
                #absolutely-position{height: 20px; left: 420px; position: absolute; text-align: center;top: 125px; width: 465px;font-weight: bold; padding: 0px; margin: 0px;}

Любые идеи о том, как получить абсолютную позицию DIV в разных браузерах? Ни одна из статей, которые я нашел на SO или где-либо еще, не была полезной. Я попытался изменить позиционирование на относительное и использовать z-index, но это также дало противоречивые результаты. Мой код чист, когда я также запускаю его через онлайн-проверку.

Заранее благодарю за любую помощь.


debugging css cross-browser positioning
person surfbird0713    schedule 24.10.2012    source источник
comment
Создайте JSFiddle, и я постараюсь помочь!   -  person jamesplease    schedule 25.10.2012

Ответы (1)


arrow_upward
0
arrow_downward

Примените сброс: http://meyerweb.com/eric/tools/css/reset/ или Normalize.css http://necolas.github.com/normalize.css/ на ваши страницы, прежде чем применять ваш обычный css. Я почти гарантирую, что вы сталкиваетесь с разными стилями по умолчанию, которые используют разные браузеры.

Что делает сброс, так это устанавливает все стили на базовый уровень, прежде чем вы начнете применять свои собственные стили. Таким образом, если Chrome применяет размер x к элементу, а IE применяет размер Y, сброс помещает их обоих в 0. Недостатком является то, что каждый элемент, который вы используете, должен быть изменен. Например, у списков больше нет стиля по умолчанию, нет блочных кавычек и т. д.

Normalize.css немного проще в использовании для новичков, потому что он устанавливает базовые стили для всего, как это делает сброс, но он придает большинству вещей стиль, а не просто устанавливает их на 0, поэтому ваши списки по-прежнему будут отмечены маркером, но они будет выглядеть одинаково во всех браузерах (или должно).

person Rick Calder    schedule 24.10.2012
comment
Спасибо за предложение! Я использовал сброс Мейера в качестве отправной точки и отредактировал его так, чтобы он влиял только на контент в зоне CMS, в которой я работаю. - person surfbird0713; 25.10.2012