Question

我对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>

我如何才能做到这一点？

Answer 1

您应该使用border-radius而不是浏览器特定的变体。这将确保浏览器不仅与ff和chrome兼容。

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

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

自从一段时间以前，firefox和chrome也支持普通的border-radius（参见http://www.w3schools.com/cssref/css3_pr_border-radius.asp）。

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

标题中的效果与Firefox不兼容

1 个答案: