CSS ссылки ведут себя по-разному в Chrome и Safari против Firefox - PullRequest
Новая
       27

CSS ссылки ведут себя по-разному в Chrome и Safari против Firefox

0 голосов
/ 03 августа 2010

В настоящее время у меня 2 проблемы.Прежде всего, в Chrome и Safari вокруг ссылки на изображение есть серая рамка.в Firefox границы нет.вот код: 

<a href="link.html" target="_blank">Link title <img class="leaving" /></a>

и css: 

.leaving {
    background-image: url("images/leaving.png");
    height:10px; width:10px;
    display:inline-block;
    background-repeat:no-repeat;
    border:none;
}

как мне избавиться от границы?

также, некоторые ссылки на заголовки подчеркнуты хромоми сафари, хотя я установил текстовое оформление на нет.я хотел бы знать, как избавиться от подчеркивания, а также как изменить его цвет. 

<a href="link">
<h3>Title</h3>
</a>

a h2,h3{
    color:#00264B;
    text-decoration:none;
}

"a" установлен для подчеркивания в других местах, но не должен "h3" переопределять что-либоеще?что здесь происходит?

спасибо.

Ответы [ 2 ]

2 голосов
/ 03 августа 2010

у вас есть возможная ошибка в вашем коде:)

Вот что у вас есть: 

a h2,h3{
    color:#00264B;
    text-decoration:none;
}

Код выше говорит, что все H2, которые содержатся с тегами "a", и все h3 (которые НЕ содержатся в тегах "a")

Во-первых, если вы хотите, чтобы все H3 содержались внутри тегов "a", то вам нужно сделать следующее: 

a h2, a h3{
    color:#00264B;
    text-decoration:none;
}

Обратите внимание, что я добавил еще одну букву "a" в CSS

Во-вторых, и, возможно, что еще более важно, я думаю, что лучше заключать теги "a" в теги "h", а не как вы это делаете: 

h2 a, h3 a{
    color:#00264B;
    text-decoration:none;
}

Но это может не работать с вашим существующим кодом:

Надеюсь, это поможет

0 голосов
/ 27 ноября 2012

Это известная проблема с кросс-браузерными операциями в Firefox и Safari.Как бы то ни было, обходной путь для этой проблемы - заменить тег img на тег span, и все будет работать как положено.Я изменил код, как показано ниже 

<body>
    <a href="link.html" target="_blank">Link title <span class="leaving"/></a>

</body>
</html>

или, если вы хотите продолжить работу с самим тегом img, вам нужно удалить атрибут width из определения css.Пожалуйста, найдите измененный CSS ниже 

.leaving {
    background-image: url("images/leaving.png");
    height:10px;
    display:inline-block;
    background-repeat:no-repeat;
    border:none;
}
...