2

我正在尝试获得一个虚线表格边框，它具有圆形边缘（使用边框半径）。我在所有其他浏览器中都实现了这一点，但我知道这是 Firefox 中的一个错误，并且永远不会正确显示。看看我在这里遇到的问题。

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

本质上，如果 Firefox，

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

如果有其他浏览器，

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

我对 CSS 相当陌生，还没有处理浏览器的细节。如果有人可以提供帮助（或指出此方法的问题！），我将不胜感激。谢谢

4

3 回答 3

2

如果 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 被窃听。

于 2013-08-14T22:19:21.737 回答
0

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

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

话虽如此，这种效果似乎是浏览器故意的：我记得早期版本的 Firefox 确实在圆角上显示了点，所以这背后可能有一些合理的推理。我同意这并不理想。但如果它是浏览器的标准功能，为什么不直接运行它并让 Firefox 用户按照 Firefox 想要展示的方式拥有它呢？（看起来没那么糟糕，不是吗？）

当然，另一方面，可能会问一个问题是，如果您很高兴为 Firefox 用户设置一个实心边框，为什么不让每个人都使用实心边框呢？这似乎是最简单的答案。

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

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

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

其美妙之border-image处在于您可以对边框做几乎任何您喜欢的事情。如果您想要一个特定的点图案，那么只需创建一个带有该点图案的图像；问题解决了。

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

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

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

于 2013-08-15T08:51:03.997 回答
0

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

  • 您可以为 Firefox 添加条件样式表。对于几种风格来说，这有点矫枉过正。
  • 你可以使用 CSS hack。这不是最好的方法，因为它依赖于浏览器错误（可以修复）。
  • 您可以使用 javascript 或 PHP 函数来解析用户代理并将 os、浏览器和版本作为类附加到 body 或 html 标记。然后您可以使用正确的类编写样式。
  • 您可以提交错误报告并祈祷。

希望这可以帮助！祝你好运！

于 2013-08-14T22:22:09.673 回答