как сделать так, чтобы CSS-подсказка не выдвигала наброски элементов в FF - PullRequest
Новая
       22

как сделать так, чтобы CSS-подсказка не выдвигала наброски элементов в FF

3 голосов
/ 10 октября 2011

Я следую примеру, опубликованному здесь для создания пользовательских подсказок CSS. 

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 99;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

Мне интересно, есть ли способ, чтобы всплывающая подсказка не выдвигала свои родительские элементы outline в FireFox, кажется, что он отлично работает в Chrome 

div {
    display: inline-block;
    padding: 20px;
    border: 2px solid #000;
    outline: 2px solid #F00;
}

см. Пример здесь

1 Ответ

2 голосов
/ 10 октября 2011

Я не понимаю, как вы можете это исправить.Интересно, это ошибка Firefox?

Единственное, что приходит на ум, это использовать box-shadow вместо outline:

http://jsfiddle.net/thirtydot/HgeVh/9/

Этоесть недостаток в том, что вы теряете схему в IE8, если это имеет значение.

...