Question

我想要一些那些漂亮的圆角用于我正在进行的网络项目。

我认为我会尝试使用javascript而不是CSS来完成它，以便将图像文件的请求保持在最低限度（是的，我知道可以将所有必需的圆角形状组合成一个图像）和我还希望能够在运行中更改背景颜色。

我已经使用了jQuery，所以我查看了优秀的rounded corners plugin，它在我尝试过的每个浏览器中都像一个魅力。作为一名开发人员，我注意到有机会让它更有效率。该脚本已包含用于检测当前浏览器是否支持webkit圆角（基于Safari的浏览器）的代码。如果是这样，它使用原始CSS而不是创建div的层。

我认为如果可以执行相同类型的检查以查看浏览器是否支持Gecko特定的-moz-border-radius-*属性并且是否支持它们，那将是非常棒的。

对webkit支持的检查如下所示：

var webkitAvailable = false;  
try {  
    webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
} 
catch(err) {}

然而，这对-moz-border-radius不起作用，所以我开始检查替代方案。

我的后备解决方案当然是使用浏览器检测，但这远非推荐的课程实践。

我最好的解决方案如下。

var mozborderAvailable = false;
try {
    var o = jQuery('<div>').css('-moz-border-radius', '1px');
    mozborderAvailable = $(o).css('-moz-border-radius-topleft') == '1px';
    o = null;
} catch(err) {}

这是基于Gecko将复合-moz-border-radius“扩展”为四个子属性的理论

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

那里有没有更好的解决方案的javascript / CSS大师？

（此页面的功能请求位于http://plugins.jquery.com/node/3619）

Answer 1

这个怎么样？

var mozborderAvailable = false;
try {
  if (typeof(document.body.style.MozBorderRadius) !== "undefined") {
    mozborderAvailable = true;
  }
} catch(err) {}

我在Firefox 3（真实）中测试过，在Safari，IE7和Opera中进行了测试。

（编辑：更好的未定义测试）

Answer 2

为什么不在样式表中使用-moz-border-radius和-webkit-border-radius？它是有效的CSS并抛出一个原本未使用的属性会比javascript做的工作更难以确定它是否应该应用它。

然后，在javascript中你只是检查浏览器是IE（或Opera？） - 如果是，它将忽略专有标签，你的javascript可以做到这一点。

也许我在这里错过了什么......

Answer 3

我知道这是一个较老的问题，但它在测试边界半径支持的搜索中显示得很高，所以我想我会在这里抛出这个金块。

Rob Glazebrook有一个小片段，扩展了jQuery的支持对象，可以快速检查边缘半径支持（还有moz和web-kit）。

jQuery(function() {
jQuery.support.borderRadius = false;
jQuery.each(['BorderRadius','MozBorderRadius','WebkitBorderRadius','OBorderRadius','KhtmlBorderRadius'], function() {
    if(document.body.style[this] !== undefined) jQuery.support.borderRadius = true;
    return (!jQuery.support.borderRadius);
}); });

Attribution

这样，如果不支持它，您可以退回并使用jQuery实现双向滑块，以便其他浏览器仍然具有类似的视觉体验。

Answer 4

无条件地应用CSS并在脚本中检查element.style.MozBorderRadius？

Answer 5

由于您已经在使用jQuery，因此您可以使用jQuery.browser实用程序进行一些浏览器嗅探，然后相应地定位您的CSS / JavaScript。

Answer 6

问题在于Firefox 2不对边框使用消除锯齿功能。在使用原始圆角之前，脚本需要检测Firefox 3，因为FF3确实使用了抗锯齿。

Answer 7

我开发了以下方法来检测浏览器是否支持圆形边框。我还没有在IE上测试它（我在Linux机器上），但它在Webkit和Gecko浏览器（即Safari / Chrome和Firefox）以及Opera中都能正常工作：

function checkBorders() {
  var div = document.createElement('div');
  div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
  for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
    if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
      return true;
    };
  return false;
};

如果你想测试Firefox 2或3，你应该检查Gecko渲染引擎，而不是实际的浏览器。我找不到Gecko 1.9的准确发布日期（这是支持抗锯齿圆角的版本），但是Mozilla wiki说它是在2007年第一季度发布的，所以我们假设可能只是为了肯定的。

if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 )

总而言之，组合功能是这样的：

function checkBorders() {
  if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 ) {
    return true;
  } else {
    var div = document.createElement('div');
    div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
    for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
      if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
        return true;
      };
    return false;
  };
};

检查-moz-border-radius支持的最佳方法

7 个答案: