Наведите курсор мыши, не работает только в Firefox - PullRequest
Новая
       34

Наведите курсор мыши, не работает только в Firefox

0 голосов
/ 18 февраля 2011

Я попытался и изолировал проблему ниже, потратив на это часы. Первая ссылка не указывается при наведении курсора в FF, но работает во всех других браузерах, которые я пробовал. Вторая ссылка корректно работает и в Firefox. Большая часть существующего HTML на сайте структурирована следующим образом, так что исправление для всего сайта будет оценено.

HTML: (при вставке кода здесь удаляются теги) http://pastebin.com/duqfKGeY

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
FF test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="ff.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <table>
        <tbody>
    <tr>
            <td>

        <ul type="disc">

                    <li>
            <a target="_blank" href="http://example1.com">
                <font size="2" color="#b80000"><b>Example Link 1</b></font></a>

                        <br>

            <font size="2" face="Verdana"> 

                example text  example text  example text  example text  example text  example text                  example text  example text  example text  example text  example text  example text                   example text  example text  example text  example text             example text 
                <a target="_blank" href="http://example2.com/">
                 <font size="2" face="Verdana" color="#b80000">Example link 2</font>
                </a>

                  example text  example text  example text  example text  example text  example text                    example text  example text  example text  example text  example text  example text  example text                example text  example text  example                 text  example text .
            </font> 
         </li>

        </ul>
        </td>
        </tr>
    </tbody>
</table>
</body>
</html>

CSS: 

a{color:#b80000;}
a:link{color:#b80000;text-decoration:none;}
a:visited{color:#b80000;text-decoration:none;}
a:hover{color:#b80000;text-decoration:underline;}
a:active{color:#b80000;}

Редактировать: проверка без ошибок на W3C Validator

Ответы [ 5 ]

1 голос
/ 19 февраля 2011

Тег <B> переопределяет text-decoration. Просто добавьте это: 

a:hover b{text-decoration:underline;}

Если есть другие, которые вы, вероятно, могли бы сделать: 

a:hover > *{text-decoration:underline;}
1 голос
/ 18 февраля 2011

Хорошо, обо всем по порядку,

Таблицы для разметки - обучайтесь, пожалуйста:

http://shouldiusetablesforlayout.com

http://www.hotdesign.com/seybold/

http://webdesign.about.com/od/layout/a/aa111102a.htm

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

<font> теги устарели ДОЛГО назад, теперь мы используем CSS и <span> теги для всех наших потребностей в стилизации.

Наиболее вероятная причина, по которой вещи не работают, заключается в том, что ваш HTML в основном совершенно неправильный, да, он работает, но это убивает interwebz - Вот ваш макет, переделанный с <div> тегами и CSS - красиво и чисто, и все счастлив:

Демонстрация в реальном времени

Кроме того - проверка - это всего лишь инструмент, а не стандарт, к которому можно стремиться, он, конечно, помогает выявлять ошибки, но может привести к хлопотам, когда вы пытаетесь быть на 100% совместимыми ( Взгляд на строгость XHTML ) подробнее об этом здесь:

http://net.tutsplus.com/articles/general/but-it-doesnt-validate/

0 голосов
/ 09 марта 2012

Проблема может быть в операторе text-decoration: underline; CSS.Firefox игнорирует это в версии 3.6.Я знаю, что в версии 7.0 она работает просто отлично, но я не знаю, когда она была на самом деле исправлена.

С какой версией Firefox вы работаете?

0 голосов
/ 18 февраля 2011

Я вижу подчеркивание: hover на обеих ссылках в FF 3.6 / Mac, даже если они являются посещенными ссылками.

Как указал Алекс Томас, ваш CSS может быть более кратким - учтите, что все состояния ссылок имеют одинаковый цвет, и только состояние: hover отличается наличием подчеркивания.

Даже несмотря на то, что у грубого HTML из Google Docs есть цвет, указанный на этих тегах font (ретро, ​​а?), Продублируйте правило цвета в CSS, чтобы подчеркивание: hover отображалось в правильном цвете: 

a {
color: #b80000;
text-decoration:none;
} 
a:hover{ text-decoration:underline;}
0 голосов
/ 18 февраля 2011

Это все немного убито, я бы просто использовал:

a {text-decor: none;} a: hover {text-ornament: underline;}

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

...