Firefox和Opera不正确地渲染边框

Question

Firefox和Opera不正确地渲染边框

17

我使用纯CSS制作了一个利用梯形的圆形菜单，但当我旋转它们时，在Firefox中两侧会显示一条线，而在Opera中所有梯形都有奇怪的背景/边框颜色，有点透明。这些梯形看起来像这样。

.trapezoid {
  width: 100px;  height: 0px;
  margin: 55px auto 0 auto;
  border-bottom: 140px solid black;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  transition: rotate (100deg);
}

Chrome和IE9都可以。我该如何找到解决方法？

- Marcus Vinicius Vasconcelos

4

虽然我讨厌滥用CSS，但我赞赏你的创意 :) - Damien Overeem

1

似乎是渲染问题。在FF中，90度旋转没有问题。我认为你要么需要在Opera/FF bug-tracker上报告一个错误，要么找到另一种解决方案。 - Kraz

我心中的另一种选择是使用图像而不是CSS，但我想你可能更愿意避免这种情况。 - Kraz

如果你有兴趣，我已经提交了一个错误报告。 - Georg Fritzsche

1

+1 对于创意的精彩表现 :D - Kent Pawar

显示剩余6条评论

2个回答

0

这是因为缺少供应商前缀。按照以下方式应用供应商前缀，就能解决问题。

过渡属性用于设置和定时过渡。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

.trapezoid {
  width: 100px;  height: 0px;
  margin: 55px auto 0 auto;
  border-bottom: 140px solid black;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  -webkit-transform: rotate(100deg);
    -moz-transform: rotate(100deg);
    -o-transform: rotate(100deg);
    -ms-transform: rotate(100deg);
    transform: rotate(100deg);
}

- Ankur

我正在使用带有Compass的Sass，因此所有的供应商前缀都已应用。这不是问题。 - Marcus Vinicius Vasconcelos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Greg · Accepted Answer

对于Firefox，您需要使用-moz；对于Opera，则需要使用-o。这些是在这些浏览器中正确格式化的扩展名。这里有一个很棒的形状网站。

.trapezoid 
{ 
        border-bottom: 100px solid red; 
        border-left: 50px solid transparent; 
        border-right: 50px solid transparent; 
        height: 0; 
        width: 100px; 
        transform:rotate(180deg);
        -moz-transform:rotate(180deg); /* Firefox 4 */
        -webkit-transform:rotate(180deg); /* Safari and Chrome */
        -o-transform:rotate(180deg); /* Opera */

}

另外，我不确定您是否正在尝试更改某种效果；但是过渡代码应该是这样的：

  transition:width 2s, height 2s;
 -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
 -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
 -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */

事先添加过渡效果，然后在悬停时应用变换。如果您想像按钮一样添加它。希望这可以帮助到您。

我使用Firebug查看了一些额外的数据；在Firefox 16.02中，此代码有效：

.trapezium
{
  height: 0px;
  width: 80px;
  border-bottom-width: 80px;
  border-bottom-style: solid;
  border-bottom-color: #2d9dcd;
  border-left-width-value: 40px;
  border-left-style-value: solid;
  border-left-color-value: transparent;
  border-right-width-value: 40px;
  border-right-style-value: solid;
  border-right-color-value: transparent;
  margin-top: 30px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
}

我相信这就是你要找的。试试看，如果有效的话请告诉我。