HTML-код кнопки hover bug

Итак, я проектирую этот простой веб-сайт, и, похоже, он работал до сих пор. Я использовал Safari для тестирования, но я не могу заставить его смотреть прямо на другие браузеры, а именно на Firefox 3.5-ish. Проблема заключается в использовании строки кнопок. В других браузерах кнопки сдвигаются вправо, как если бы на них были отступы или поля, но я указал прописку 0. В Chrome кнопки переходят в правильное место после зависания над исходным пятном, но возвращаются в исходное положение снова, если страница обновляется через открытие инспектора. В Firefox и IE9 они сдвигаются вправо, но не возвращаются вообще. Есть ли способ исправить это? Вот код, который relavent: HTMLHTML-код кнопки hover bug

<div id= "menu"> 
<ul> 
<li> 
    <a href="javascript:openPage1()"> 
     <span class="menu-button">Home</span> 
     </a> 
    </li> 
    <li> 
     <a href="javascript:openPage2()"> 
     <span class="menu-button">Dave is Cool</span> 
     </a> 
    </li> 
    <li> 
     <a href="javascript:openPage3()"> 
     <span class="menu-button">Submit</span> 
     </a> 
    </li></ul></div>

CSS

#menu ul { 
margin:0; 
padding:0;

}

#menu { 
height: 164px; 
text-align: center; 
position:absolute; 
bottom:-120px; 
width:650px;

}

#menu li { 
height:30px; 
width:120px; 
    display: inline-block; 
    text-align: center; 
    line-height:30px; 
    margin: 30px 5px; 
    position: relative; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease;

}

#menu li:hover { 
    margin: 30px 10px;

}

#menu li:active { 
    margin: 30px 10px;

}

#menu a:link { 
text-decoration:none; 
color:black;

}

#menu a { 
text-decoration:none; 
text-transform:uppercase; 
color:black;

}

#menu a:active { 
text-decoration:none; 
color:black;

}

#menu a:hover { 
text-decoration:none; 
color:black;

}

источник

2012-01-26 Taslem

Можете ли вы разместить ссылку на свой сайт? У меня это работает, но я не вижу ничего плохого ... все браузеры, которые я тестирую, выглядят хорошо (т. Е. 8 не делает ослабление, конечно, но он выглядит одинаково в браузерах (FF9 , Chrome 16, IE8) .Кроме того, если бы вы могли включить некоторые скриншоты с выделенной проблемой –

К сожалению, у меня не было возможности разместить сайт в Интернете. Однако это проблема, с которой я сталкиваюсь: http: // imgur. ком/3t0rh – Taslem

Я также тестировали в Chrome, Firefox, IE9 и режим IE8 из IE9 и работал нормально. Попробуйте использовать ease-in-out вместо ease в ваших свойствах перехода. Я действительно не знаю, что случилось.

источник

2012-01-27 04:50:49 thiagobraga

HTML-код кнопки hover bug

ответ

Смежные вопросы