Question

我正在尝试获取具有圆边（使用border-radius）的虚线表边框。我已经在所有其他浏览器中实现了这一点，但我知道这是Firefox中的一个错误，并且永远无法正常显示。查看我遇到的问题here。

我想知道是否可以单独使用Firefox显示实线而不是虚线，同时让其他浏览器显示虚线。

基本上，如果是Firefox，

border: 2px solid #000000;
-moz-border-radius:10px;

如果有其他浏览器，

border: 2px dashed #000000;
-webkit-border-radius:10px;
border-radius:10px;

我对CSS很新，还没有处理过浏览器细节。如果有人可以提供帮助（或指出这种方法的问题！）那么我将非常感激。感谢

Answer 1

如果FireFox出现问题，可能需要沿着firefox的图像路径走下去。

你可以有一些课程：

.tr, .tl, .br, .bl {
  display: none; /* Don't show for normal browsers. */
}

@-moz-document url-prefix() { /* Activate for FF. */
    div { /* Probably best to tie this to a class / id. */
      position: relative;
    }

    .tr, .tl, .br, .bl {
      display: inline;
      position: absolute;
    }

    .tr { /* top right */
      background-image: url("curved_top_right.gif");
      top: 0;
      right: 0;
    }

    .tl {} /* top left - Use .tr as a ref */
    .bl {} /* bottom left - Use .tr as a ref */
    .br {} /* bottom right. - Use .tr as a ref */
}

然后在你的Html中

<div>
  <div class="tr"></div>
  <div class="tl"></div>
  <div class="br"></div>
  <div class="bl"></div>
</div>

不理想，但可以帮助你，因为FF被窃听。

Answer 2

你可以通过几种不同的方式做到这一点。

您可以为firefox添加条件样式表。这对于几种风格来说有点矫枉过正。
您可以使用CSS hack。这不是最好的方法，因为它依赖于浏览器错误（可以修复）。
您可以使用javascript或PHP函数parse the user-agent并将操作系统，浏览器和版本作为类附加到正文或html标记中。然后你可以用正确的类来编写样式。
您可以提交错误报告并祈祷。

希望这有帮助！祝你好运！

Answer 3

简短的回答是否定的，这是不可能的。

理想的解决方案是让Firefox解决问题并解决问题。这看起来是一个相当明显的问题，所以我认为Mozilla团队了解它;您可能值得花时间查看Firefox问题跟踪器，看看他们是否有机票，以及是否已完成任何工作。鉴于他们的快速发布周期，有可能相对较快地修复，你应该检查一下 - 你不想做的一件事是花费多年时间修复你的网站来解决它，只是发现它不是问题当你完成工作时。

话虽如此，浏览器看起来似乎是故意的：我记得早期版本的Firefox确实在圆角上显示了点，因此可能会有一些合理的推理。我同意这并不理想。但是，如果它是浏览器的标准功能，为什么不运行它并让Firefox用户拥有它想要显示它的方式？（看起来不好，是吗？）

另一方面，当然，一个可能会被问到的问题是，如果你很高兴为Firefox用户提供一个可靠的边框，那为什么不让每个人都坚持下去呢？这似乎是最简单的答案。

假设你仍然想要解决它，在解决方法方面，我强烈建议你回避浏览器黑客攻击或用户代理解析;这两种解决方案都很脆弱，可能会导致问题。显然，在这种情况下，可能发生的最坏情况是显示错误的边界，但是，你应该警惕这两种技术。

一个建议是尝试border-image而不是border-radius。

border-image是一个相对较新且很少使用的CSS功能，它允许您使用图像构建边框。（你永远不会从名字中猜出来，对吗？）

border-image的美妙之处在于你可以用边框做任何你喜欢的事情。如果你想要一个特定的点状图案，那么只需创建一个带有这种点图案的图像;问题解决了。

语法有点繁琐，它最适合SVG图像，但我相信你会在经过一些实验后得到它。

你可能会说，这是一个非常强大的功能。它很少使用的主要原因是因为它是新的。这意味着它没有很好的浏览器支持，但对于你来说真的不重要，因为你将绘制看起来相对接近标准border-radius效果的边框，并且你可以使用标准{{1作为后退。您想要影响的一个浏览器（Firefox）确实支持它，因此它应该解决问题。

是的，我同意，对于一个简单的问题，这是一个稍微复杂的答案，但它可能是一种让它在所有浏览器中合理一致地工作的方法。值得一试。

如何创建特定于CSS浏览器的边框

3 个答案: