Вопрос по html, firefox, rendering – Firefox иногда неправильно отображает HTML

2

Я разработал меню CSS, и оно отлично работало во всех браузерах в моем тестировании (чистый HTML / CSS). Когда мы принесли код в нашу среду разработки, которая работает на cakePHP, мы начали иногда видеть ошибку меню в Firefox (3.5.2). Это не происходит ни в каком другом браузере. Я проверил источник, когда ошибка возникает, и это то, как она выглядит (другой блок li ниже, как это должно выглядеть):



    
        <a href="https://stackoverflow.com/businesses/dashboard">
        
            <span class="white caps">
                </span></a><a href="https://stackoverflow.com/businesses/dashboard">Dashboard</a>
            
            <a href="https://stackoverflow.com/businesses/dashboard">
                <br>
                At-a-glance view of all your stuff
            </a>
        
    
    
        <a href="https://stackoverflow.com/businesses/edit_profile">
        
            <span class="white caps">Listing</span>
            <br>
            View and edit your listing
        
        </a>
    

Вот'Соответствующий CSS:


span.caps { text-transform:uppercase; }
.white{color:#fff;}
.nav1 { background: url('../images/gradients/nav1.gif') repeat-x; height:50px; }
.nav1 #dropnav { list-style-type:none; margin:0; height:50px;float:left;line-height:1; }
.nav1 #dropnav li { padding:8px 10px 7px 10px; border-left: 1px solid #3ba2da; border-right: 1px solid #1f74a3;float:left;position:relative; }
.nav1 #dropnav li div { position:relative; float:left; padding-top:5px; }
.nav1 #dropnav li a { padding:0 0 6px 40px; float:left; text-decoration:none;}
.nav1 #dropnav li:hover, .nav1 #dropnav li.active { background: #3b3b3b; }
.nav1 #dropnav li#first:hover, .nav1 ul li#last:hover {background:none;}
.nav1 #dropnav li:hover small, .nav1 #dropnav li.active small{ color:#fff; }
.nav1 small { line-height:1.2em; color:#111; }
.nav1 span { font-weight:bold; }
.nav1 #dashboard a{ background: url('../images/icons/nav134.png') no-repeat 0 -102px; }
.nav1 #listing a{ background: url('../images/icons/nav134.png') no-repeat 0 -68px; }
.nav1 #messages a{ background: url('../images/icons/nav134.png') no-repeat 0 -34px; }
.nav1 #tools a{ background: url('../images/icons/nav134.png') no-repeat 0 0; }

Я знаю, что может быть много проблем, но яЯ пытаюсь сузить это.

Я несчитать вы'Разрешено иметь элементы уровня div (div) внутри ссылок (a) в соответствии со стандартами w3. mpen
Это'помогу, если тыбуду описывать что его "глючит " состоит из ровно. chaos
мне выглядит одинаково в разных браузерах. Может быть, добавить скриншоты и / или полный HTML-файл? orip
Да, W3C валидатор задыхается от этого. chaos

Ваш Ответ

4   ответа
2

Как уже упоминалось в комментариях, ваша разметка не является строго допустимой (пустой a или div внутри a). Для меня это означает, что, хотя он может отображаться так, как вы хотите в большинстве браузеров, он 'бессмысленно говорить, что это делаетправильно' здесь и не там.

Мой совет - исправьте разметку, чтобы она сначала проверялась. Если у вас есть действительная разметка, вы можете ожидать, что хорошие браузеры, такие как Firefox, будут ее отображатьправильно' а затем устранять любые проблемы, связанные с браузером, которые остаются.

W3C валидатор:http://validator.w3.org/

0

Помните, это правильный код в HTML5.

http://html5doctor.com/block-level-links-in-html-5/

4

Вы не можете иметь div внутри ссылки. Firefox автоматически исправляет это так, как он думает. Конечно, машина можетна самом деле не знаю, что вы пытались, так чтожучки

На самом деле, по-видимому, FireFox - единственный браузер, который даже видит, что вы допустили ошибку. Другие браузеры просто игнорируют ваш неправильный HTML.

Попробуйте удалить div и просто введите <a> свойство display: block в таблице стилей.

Спасибо, это работает! Stefan
4
Да. Ваша проблема с CakePHP, а не с Firefox. Matt Howell
Когда разметка искажена, браузеры могут интерпретировать ее по-разному. Попробуйте подтвердить свою страницу, например,addons.mozilla.org/en-US/firefox/addon/249 orip
Да, но когда он отображается правильно, HTML выглядит так: <li id = "Приборная панель "> <a href = "/ Предприятия / панель "> <DIV> <span class = "белые колпаки ">Панель </ SPAN> <бр /> <маленький>Обзор всех ваших вещей </ Маленький> </ DIV> </ А> </ Li> Stefan
Правильно. Вы говорите, чтоправильный' (не в соответствии со стандартами HTML, но пока не обращайте на это внимания) HTML создается для каждого браузера, кроме Firefox 3.5.2? Потому что если так, топроблема во всем?s производит HTML, а не Firefox; браузеры непереписать ваш HTML. chaos

Похожие вопросы