Firefox обрисовывает рамку вокруг тени на hover

Question

Это мой первый вопрос в StackOverflow, поэтому я попытаюсь отформатировать его правильно.

В принципе, у меня есть div с рамкой и контуром. При наведении указатель также получает тень, которая, конечно же, должна быть вне контура. Это хорошо во всех браузерах, кроме firefox. По какой-то причине Firefox, похоже, выдает контур за пределами тени. Пример можно увидеть здесь: http://rubencoolen.be/test.php

Это мой CSS:

.block { 

    background: #eceeeb; 
    border: 3px solid white; 
    outline: 2px solid lavender; 
    width: 240px; 
    padding: 10px; 
    float: left; 
    height: 130px; 
    margin: 40px; 
    text-align: center; 
    cursor: default; 
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s; 
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s; 
    -o-transition: background 0.7s; 
    transition: background 0.7s, box-shadow 0.3s; 

} 

.block:hover { 

    background: whitesmoke; 
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30); 
    -moz-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30); 
    box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.30); 

} 

Я не могу найти правильный путь решения этой проблемы.

Прошу прощения за умеренный английский, это не мой основной язык.

Answer 1

Вы можете просто гнездо div s дать тот же эффект, как и набросков:

<div class='outline'> 
    <div class="block">Test</div> 
</div> 

А затем добавить изменить CSS:

.block { 
    position:absolute; 
    top:0px; 
    left:0px; 
    background: #eceeeb; 
    border: 3px solid white; 
    width: 234px; 
    padding: 10px; 
    float: left; 
    height: 124px; 
    text-align: center; 
    cursor: default; 
    -moz-transition: background 0.7s, -moz-box-shadow 0.3s; 
    -webkit-transition: background 0.7s, -webkit-box-shadow 0.3s; 
    -o-transition: background 0.7s; 
    transition: background 0.7s, box-shadow 0.3s; 
} 

.outline { 
    position:relative; 
    border: 2px solid lavender; 
    width: 240px; 
    padding: 10px; 
    float: left; 
    height: 130px; 
    margin: 40px; 
} 

This works in both latest versions of Chrome and Firefox

Answer 2

Как уже говорилось в комментарии, вы на самом деле не используете outline для своих целей - это не должно рассматриваться как дополнительная граница в случае, если стандартная для вас недостаточно; у него есть своя собственная причина для существующей и ее собственной семантики. Я предлагаю не использовать его таким образом вообще.

Итак, вы спросили, что вы можете использовать вместо этого?

• border-image:

  Последние браузеры все поддерживают функцию под названием border-image, который позволяет определить внешний вид границы в значительной степени, как вы хотите. Вы можете указать любые изображения, которые вы хотите в границах, и, таким образом, вы можете создать границу, чтобы выглядеть так, как у вас есть (или даже намного сложнее), без необходимости прибегать к стилю outline.

  Недостатком является то, что IE не поддерживает его (даже IE10), поэтому вам нужно будет вернуться к своему решению outline. Но вы можете использовать что-то вроде Modernizr для обнаружения функции для border-image и только отступать до outline, если border-image не поддерживается.

  • Ссылка: https://developer.mozilla.org/en-US/docs/CSS/border-image
  • Примеры: http://www.sitepoint.com/css3-border-image/
  • Поддержка браузера: http://caniuse.com/border-image

• :before или :after с границей.

  Псевдо-селекторы :before и :after позволяют создавать дополнительный элемент до того, как данный элемент используется только с помощью CSS.

  Вы можете использовать любой из них для создания элемента с border, который поможет решить эту проблему, без необходимости использовать outline или любую дополнительную разметку.

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