#css #internet-explorer #css-float
#css #internet-explorer #css-float
Вопрос:
У меня есть веб-сайт, который отлично отображается в Safari, FF, Chrome и Opera. Однако в IE мой веб-сайт отображается немного не так.
HTML:
<div align="center" id="headerdiv"><div id="log"><font id="subtitleAttribs" onclick="login()">Login أدخل حساب</font></div>
<a class="infoHme"><font id="titleAttribs" onclick="home()">T h e<font color="#999999" size="6px"> | </font>A r t i s a n a t<font color="#999999" size="6px"> | </font>N e t w o r k</font><span>Home دار</span></a>
<div id="lang"><font id="subtitleAttribs" onclick="arb()">العربية</font><font color="#999999"> | </font><font id="subtitleAttribs" onclick="eng()">English</font></div></div>
CSS:
#log
{
float: left;
padding: 5px;
}
#lang
{
float: right;
padding: 5px;
}
#titleAttribs
{
color: #6699cc;
font-size: 26px;
}
#headerdiv
{
background-color: #faf8cc;
margin: 0px 45px 0px 45px;
}
В моем фрагменте кода есть четыре части. Во-первых, «headerdiv» — это контейнер. Во-вторых, «log» — это div, который должен быть слева. В-третьих, «titleAttribs» — это текст, который находится посередине. В-четвертых, «lang» — это div, который должен быть справа.
«log» и «lang» плавают так, чтобы они находились по обе стороны от текста «titleAttribs». Моя проблема в том, что в IE «lang» заканчивается отображением ниже «log» и «titleAttribs» справа. Я тестирую свой код на Mac, поэтому мне сложно тестировать в IE. Когда я использую ПК и запускаю файлы .html и .css в IE9, все отображается просто отлично. Однако, когда я захожу на свой веб-сайт из Интернета, IE сталкивается с проблемой рендеринга, которая еще больше затрудняет мне решение.
Кто-нибудь знает простой способ исправить эту проблему без необходимости вносить слишком много изменений. Я понимаю, что мог бы добавить ширину, однако я безуспешно пытался. Кроме того, URL веб-сайта:http://www.imkenliya.com/artisan_network.html
Если вы запустите веб-сайт в IE, вы заметите, что кнопки английского языка под окном поиска нет на желтом баннере справа от заголовка, что является проблемой с отображением.
Спасибо,
Комментарии:
1. вы не возражаете разместить, может быть, ссылку или jsfiddle?
2. @в основном это может быть из-за дополнительной ширины i IE, поэтому, пожалуйста, используйте проверку рекламы на панели инструментов разработчика
3. Спасибо за предложения. Я пытался изменить ширину и использовал инструмент разработчика в IE, но я не смог получить тот же вид, который я получаю во всех других браузерах. Я даже попытался переместить все три тега div влево, а затем изменить их ширину, чтобы имитировать сплошную полосу в верхней части веб-страницы. Однако это выглядело довольно плохо при использовании окон браузера разного размера. К счастью, у меня есть предупреждение о необходимости использовать любой браузер, отличный от IE. В основном это связано с переходом на CSS3.
Ответ №1:
Я разобрался со своей проблемой путем постоянных проб и ошибок. В принципе, IE читает мой html иначе, чем другие браузеры. По-другому упорядочив информацию на моей HTML-странице, IE смог отобразить ее должным образом. Порядок следующий:
контейнер, div float: слева, div float: справа, средняя информация
Изначально у меня было следующее:
контейнер, div float: слева, средняя информация, div float: справа
Это казалось логичным, однако не для IE. Кроме того, другие браузеры по-прежнему правильно отображают мой html.
Ответ №2:
Используйте таблицу сброса CSS (например, эту =>http://meyerweb.com/eric/tools/css/reset /).
Также отделите стили от вашей HTML-разметки (выделите div align=»center» и тег font. Замените их соответствующим CSS).
Если это не решает проблему, пожалуйста, предоставьте ссылку на сайт.
Комментарии:
1. Спасибо за предложения. Таблица сброса не решила проблему, но ваш комментарий об очистке моего html заставил меня провести некоторую генеральную уборку. В любом случае, IE по-прежнему не знает, как отобразить мой веб-сайт, но, по крайней мере, все остальные браузеры знают.