У меня есть веб-сайт, который прекрасно отображается в 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, вы заметите, что кнопка на английском языке под окном поиска не находится в желтом баннере справа от заголовка, что является проблемой рендеринга.
Спасибо