如何使css工具提示不在FF中推送元素轮廓

下面是制作自定义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);
}

我想知道是否有办法不让工具提示在FireFox中推出它的父元素

outline

，它在Chrome中似乎工作得很好

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

---

我不知道你怎么可能解决这个问题。我想知道这是否是Firefox的bug

我想到的唯一一件事是使用

box shadow

而不是

outline

：

---

这样做的缺点是，如果有必要的话，你会失去IE8的轮廓。

+1。好问题。除了不使用

outline

之外，我看不到解决方案。我想接下来的问题是如何抑制由title属性生成的默认工具提示。或者css中有没有一种方法可以附加到元素数据集<代码>a[数据标题]：悬停：在之后，可能值得在单独的问题中提问。啊，是的。大纲不错，但纯粹是风格上的。如果IE8看不见，我也不会太沮丧。