标题中的效果与火狐浏览器不兼容

Effect in title is not compatible with Firefox

本文关键字：火狐浏览器 不兼容 标题      更新时间：2023-09-26

我对CSS和JavaScript有一个影响，使海报在链接的标题字段中变圆，在chrome中看起来不错，但在Firefox中它看起来像一个矩形，而应该看起来像chrome。

我正在尝试的是圆角边缘与chrome和Firefox一致。

例： 

http://i.imgur.com/ltQkAON.png

源：

p#vtip { 
  word-wrap: break-word;
  display: none;
  position: absolute;
  padding: 5px;
  left: 5px;
  font-size: 0.75em;
  background-color: #666666;
  border: 1px solid #666666;
  
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;
  border-radius: 5px;
  z-index: 9999;
  color:white;
}
p#vtip #vtipArrow {
  word-wrap: break-word;
  position: absolute;
  top: -10px;
  left: 5px
}
.ok {
  border:1px dotted green;
  color:green;
  padding:10px
}
.vtip2 {
  word-wrap: break-word;
  display: none;
  position: absolute;
  padding: 5px;
  left: 5px;
  font-size: 0.75em;
  background-color: #666666;
  border: 1px solid #666666;
  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  
  z-index: 9999;
  color:white;
  background:#312c2b;color:white;
}
            .vtip{cursor:pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dropotron/1.4.3/jquery.dropotron.min.js"></script>
<a href="http://www.google.com" class="vtip" title="yeah 123 yeah">test</a>

我怎样才能做到这一点？

您应该使用边框半径而不是特定于浏览器的变体。这将确保浏览器不仅与ff和chrome兼容。

例如，这适用于您的请求： 

 <a style="border: 1px solid #000; border-radius: 5px;">Bla bla</a>

此外，自很久以前以来，Firefox 和 chrome 就支持普通边框半径（见 http://www.w3schools.com/cssref/css3_pr_border-radius.asp）。

另外，我认为-moz-border-radius在较新版本的Firefox中删除了（至少我似乎找不到它了），但找不到任何关于它的官方帖子。

相关文章：