Как заставить CSS работать в Firefox - PullRequest
Новая
       27

Как заставить CSS работать в Firefox

1 голос
/ 13 января 2012

Я создаю веб-систему, но она не отображается правильно в Firefox (и, вероятно, не в IE), но это здорово в Google Chrome, страница такая: Страница с ошибками

Проблема в том, что мой компонент слишком большой в Firefox.Я использую width: 760px; и повторяю изображение небольшой ширины для этих 760 пикселей.Но Firefox делает это для более чем 760 пикселей (как вы можете видеть в ссылке).

Это мой ul-html код: 

<body id="maincontent">
    <ul class="ulmenu">
        <li><a href="#" >Registrar</a></li>
        <li><a id="lastmenu" href="#" >Realizar login</a></li>
    </ul>
</body>

И мой css: 

root { 
    display: block;
}
#maincontent
{
    background-color: black;
    width: 760px;
    margin: auto;
}
ul.ulmenu
{
    text-align: center;
    margin-top:0;
    display:table;

    width: 760px;
    max-width: 760px;
    list-style-type: none;
    height: 60px;

    background-image: url(../image/menubg.png);
    background-repeat: repeat-x;
    /*
    visibility: hidden;*/
}
ul.ulmenu li
{
    float: left;
}
ul.ulmenu a
{
    background-image: url(../image/menudiv.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 32px;
    padding-left: 32px;
    line-height: 60px;
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 21px;
}
ul.ulmenu a:hover
{
    color: #AAAAAA;
}

Чтобы централизовать опции меню, я создал для этого некоторый код в JS с помощью jQuery.Если я удаляю этот код, ширина зеленого изображения в Firefox становится меньше, но она все же больше, чем необходимо (около 100 пикселей), хромированные изображения остаются неизменными.

Я знаю только основы CSS.Кто-нибудь может указать мне, как я могу это исправить?

---- EDITED -----

Fiddler URL для кода (но ошибка замечена только в развернутом браузере):

Посмотреть на Fiddler

Ответы [ 2 ]

2 голосов
/ 13 января 2012

Решение: Дайте width: 551px и display: block вашему ul.ulmenu классу CSS.Это решит проблему.

Причина: Причиной проблемы является то, что FF и Chrome трактуют display: table по-разному.Для элемента с display, установленным на table, FF добавляет padding к ширине, а Chrome - нет.Решение состоит в том, чтобы использовать свойство display: block CSS, которое ведет себя одинаково в обоих браузерах (FF, а также Chrome добавляет padding к ширине для block элементов)

2 голосов
/ 13 января 2012

Вот что я понимаю.

Кажется, в Firefox вы добавляете padding-left к стилю вашего элемента, что делает его шире. 

ul.ulmenu li
{
    float: left; //remove it
    display: inline-block; // add it
}

Удалите эту строку из кода js.

$(".ulmenu").css("padding-left",Math.round((larTela-menuWidth)/2)+"px");
...