Стиль CSS переопределяется в Firefox

Question

эта проблема поставила меня в тупик весь день. Я использую Firefox 8, и у меня есть элемент UL, который находится внутри тега div, тег div анимирован с помощью виджета JQuery UI Accordion, как показано в следующей разметке:

<div id="accordion">
    <a class="ui-accordion-header">Section 1</a>
    <ul style="width: 250px !important;">
       <li>
          <dl id="MyDefinitionList"></dl>
       </li>
    </ul>
</div>

Моя проблема в том, что в Firefox стиль встроенной ширины для тега перезаписывается и сбрасывается до 0px. Таким образом, вышеприведенное в конечном итоге будет отображено в Firefox следующим образом:

<div id="accordion">
    <a class="ui-accordion-header">Section 1</a>
    <ul style="width: 0px;">
       <li>
          <dl id="MyDefinitionList"></dl>
       </li>
    </ul>
</div>

Этого не происходит в Chrome или IE, и я понятия не имею, что вызывает это в FF. В идеале я хотел бы установить ширину динамически из jQuery, я пробовал .width(250) и .css("width", "250px"), но ни один из них не дал никакого эффекта, я просто установил его в приведенном выше примере, чтобы проверить и убедиться, что он перезаписывается и сбрасывается обратно на 0px , Есть ли какая-либо настройка браузера или функция в движке рендеринга Firefox, которая вызывает такое поведение. Я также попытался проверить стили в jQuery UI CSS, но не увидел ничего, определяющего ширину как 0px. Мы ценим любую помощь, так как в настоящее время мы пытаемся выпустить это веб-приложение, и оно должно быть совместимым с браузерами. Спасибо.

UPDATE

Одна вещь, которую я забыл упомянуть, это фрагмент динамической системы меню Javascript. Я не думаю, что смогу повторить это на jsFiddle полностью. Мне интересно, имеет ли отношение к этому генерация меню? Хотя в коде меню или CSS нет ничего, что определяло бы ширину 0px. Также это не объясняет, почему это происходит в Firefox, а не в IE или Chrome.

ОБНОВЛЕНИЕ 2

Вот несколько снимков с Chrome по сравнению с Firefox

Примечание в Chrome ширина, которую я вычисляю динамически с помощью jquery, применяется к свойству element.style , как и ожидалось.

Но в Firefox element.style сбрасывается в 0px при визуализации страницы.

Answer 1

Css также следует за наследованием .. некоторые свойства css наследуются от родительских элементов управления css.как из тега body и других родителей ... используйте FireBug, чтобы проверить все это на наличие кросс-браузерных проблем и лучшего дизайна пользовательского интерфейса.Я прилагаю изображение, которое показывает такое наследство.

надеюсь, вы получите представление об этом .. если вы хотите отдать предпочтение какому-либо свойству css, которое не должно наследоваться родительскими унаследованными свойствами, тогда используйте !important с ними.например,

a{ display: block !important; }

, возможно, вы получите небольшое представление об этом ..

если вы добавляете материал во время выполнения, наблюдайте за изменениями в firbug и исправляйте графический интерфейс в соответствии с вашими требованиями, а затемиспользуйте .addCss() вместо .css(). api.jquery.com / addClass /