【问题标题】:Dashed border not showing in firefox [duplicate]Firefox中未显示虚线边框[重复]
【发布时间】:2014-10-14 15:29:11
【问题描述】:

我有一个带有 5px 虚线边框的半径 div,但边框在 Firefox 中无法正确显示。 它在 IE 和 chrome 中显示良好。

Demo

 div{
        height:100px;
        width: 100px;
        background-color: #ccc;
        border-radius: 50%;
        border:5px dashed #333;
    }

【问题讨论】:

  • 但是我使用的是 FF 32.0.3 并且它不工作。
  • 对不起,我没看到dashed... 好像在FF里不行。
  • 我不知道它是如何为你工作的,我也在检查我机器上的所有分辨率。
  • 这是一个错误。见this question。还有this one
  • 当然是重复的,但它应该得到正确的答案。

标签: html css


【解决方案1】:

您的边界正在火狐上工作,请参阅DEMO,您可以通过删除半径来检查它。当您尝试带虚线边框的圆圈时,FireFox 出现错误。

这是known bug。您的选择是:

  • 如果这只是为了一个圆圈,用<canvas>画它,例如如图所示here
  • 使用SVG(可能是内联的),它支持stroke paths的各种方式
  • 只需制作一个 PNG 图像

【讨论】:

    【解决方案2】:

    这是一个错误,这里是 Firefox 中所有其他突出的边界半径缺陷。 https://bugzilla.mozilla.org/show_bug.cgi?id=431176

    旧线程

    Why does border: 5px dashed not come out as dashed in Firefox?

    你可以使用图片来实现它

    http://www.guyroutledge.co.uk/blog/better-dotted-borders-with-border-image/

    【讨论】:

    猜你喜欢
    • 2011-05-16
    • 2017-09-02
    • 2014-10-31
    • 1970-01-01
    • 2013-10-27
    • 1970-01-01
    • 1970-01-01
    • 2012-12-04
    • 1970-01-01
    相关资源
    最近更新 更多