Как я могу сделать эти пункты меню, которые я создал, выглядят прямо в IE7?

Question

На этом сайте:

www.americaspoeticsoul.com

Я сделал меню. Я только что посмотрел на него в этом IE7, и меню выглядит ужасно. Смотрите ...

В Chrome и всех других хороших браузерах:

А в Internet Explorer 7:

Как вы видите, все это запутано в IE7. Вот код меню:

<div id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/guidelines/">Guidelines</a></li>
<li><a href="/poems/" class="current_link">Poems &amp; Commentary</a></li>
<li><a href="/contact/">Contact Us</a></li>
</ul>
</div>

и меню CSS:

/*Menu*/

#menu {
margin-bottom:5px;
}

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

#menu ul li {
float:left;
}

#menu ul li a {
padding:10px;
margin:2px;
background-color:#D41C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
width:300px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}

#menu ul li a:hover {
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
width:300px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}

#menu ul li a.current_link {
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
width:300px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}

Кто-нибудь знает, почему IE7 отображает такое меню? И не могли бы вы помочь мне это исправить?

Заранее спасибо,

Nathan

Answer 1

Вот CSS, который решит вашу проблему (но не закругленные углы, как не поддерживается). Я установил ширину для #menu, чтобы не связывался с нами , сворачиваясь на себя, затем я удалил ненужные ширины из <a> и установил их в display: block. Это означает, что элементы навигации отображаются того же размера, что и в других браузерах (если вы хотите, чтобы закругленные углы были видны после CSS):

/*Menu*/

#menu {
    margin-bottom:15px;
    width:450px;
}

#menu ul { /* remove bullets and list indents */
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul li {
    float:left;
}

#menu ul li a {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#D41C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a:hover {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a.current_link {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

В примечании стороны я изменил свойства вашего радиуса границы так, чтобы стандарт был последним. Причина этого в том, что современные браузеры используют стандартное свойство вместо старого префиксного.

Теперь есть способы заставить IE7 и IE8 создавать закругленные углы, а некоторые невероятно просты. Я бы порекомендовал использовать http://css3pie.com/. Все, что вы делаете, это загружаете их файл в корень вашего каталога и вставляете свойство behavior: url(PIE.htc); в свое правило со свойствами CSS3, то есть радиусом границы. Если вы прочитаете сайт, то увидите, что он поддерживает немало.

Answer 2

Самое простое решение - просто изменить

#menu ul li {
    float:left;
}

на

#menu ul li {
    display:inline;
}

для всех браузеров.Он исправляет проблему IE7 и по-прежнему прекрасно отображается в Chrome, Firefox и IE8 (которые я тестировал).display:inline намного менее проблематичен, чем float:left, по моему опыту, и это правильный подход.Вам нужен набор встроенных элементов списка, а не набор плавающих элементов вне обычного потока страниц.

Закругленные углы не будут работать в IE7 или IE8, хотя, если вам действительно нужночтобы сделать его идентичным во всех браузерах, вам придется использовать альтернативное решение с изображениями, JavaScript или одним из многих других обходных путей или специфическими для IE махинациями.

На мой взгляд, это не стоит лишнего кода и хлопот(и тестирование UX).Меню прекрасно функционирует без закругленных углов. Прогрессивное улучшение - это то, чем должен заниматься каждый веб-разработчик, и если кто-то скажет вам, что сайт должен выглядеть одинаково во всех браузерах, укажите их здесь - http://dowebsitesneedtolookexactlythesameineverybrowser.com/ иесли они по-прежнему настаивают на том, что они выглядят одинаково, то удвойте стоимость разработки, чтобы поддержать их устаревший браузер и подход!</rant>

Answer 3

просто попробуйте следующий CSS .. может быть полезно. И я согласен, что «andyb» говорит, что IE не поддерживает закругленные углы .. Удачи!

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

#menu ul li {
float:left;
}

#menu ul li a {
padding:10px;
margin:2px;
background-color:#D41C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
float:left;

}

#menu ul li a:hover {
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
    display:block;
}

#menu ul li a.current_link {
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
float:left;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}