1

所以，我知道浏览器检测（即navigator.userAgent）不应该用来决定使用哪个对象方法/属性；然而，我想根据浏览器使用 JavaScript 设置一些简单的 CSS。然而，仅仅证明一个全新的样式表是不够的。那么，如果我使用浏览器检测来决定将什么 CSS 应用于元素，是否可以？

编辑

好的，让我们具体一点。我说的text-shadow是按钮内部 ( <input type="button"/>) 按钮内部的文本并非在所有浏览器中都垂直居中，因此我根据浏览器使用 JS 对其进行调整。

4

8 回答 8

2

注意事项和注意事项绝对没问题！...另一方面，浏览器检测似乎已被“对象检测”取代：

  1. SitePoint 对浏览器嗅探的使用：http: //blogs.sitepoint.com/2009/05/31/why-browser-sniffing-stinks/
  2. Stackoverflow 自己的调查：为什么不推荐浏览器嗅探？
于 2010-12-24T21:19:25.340 回答
1

您似乎想要一个 IE CSS 解决方法，而不必指定一个完整的新样式表。您可以使用条件注释来实现，例如针对 IE6：

<!--[if lt IE 7]><body class="browser-ie6"><![endif]-->
<!--[if gte IE 7]><!--><body class="browser-ok"><!--<![endif]-->

那么您可以使用如下 CSS 规则：

body.browser-ok .troublesome_thing { troublesome-style: something; }

在您的主样式表中。

几乎没有充分的理由来查看navigator.userAgent，即使按照浏览器嗅探标准，这也是麻烦且不可靠的。

预计到达时间：

我在按钮内添加了一个文本阴影。

你不需要浏览器嗅探。只需包括规则。如果它有效，它就有效，如果它不起作用，你什么也没有失去。

如果您想为不支持它的浏览器提供备份样式，您可以使用替代规则：

button { text-shadow: 2px 2px 2px white; }
body.support-noshadow button { background: white; }

用一些 JS 来检测这种情况：

if (!('textShadow' in document.body.style))
    document.body.className+= ' support-noshadow';
于 2010-12-24T21:17:48.817 回答
1

如果您想检测浏览器版本或供应商以避免使用该浏览器不支持的 CSS 或其他功能，最好测试该功能是否存在，而不是测试浏览器版本。

于 2010-12-24T21:19:55.463 回答
1

text-shadow 的解决方案非常简单，因为它是一个标准。你让自己成为一个测试 DIV 并检查样式是否未定义：

if(div.style.textShadow !== undefined){ return true; }else{ return false; }

请注意，您不需要，也不应该设置 style。如果您设置任何其他对象属性，IE 将反刍样式。上面的代码在 IE 中将是未定义的，而所有其他代码将是……嗯，不是未定义的。

使用其他 CSS3 样式会变得更棘手，因为您需要考虑所有浏览器前缀：

if(
    div.style.MozBoxShadow !== undefined ||
    div.style.WebkitBoxShadow !== undefined ||
    div.style.OBoxShadow !== undefined ||
    div.style.KhtmlBoxShadow !== undefined ||
    div.style.msBoxShadow !== undefined ||
    div.style.boxShadow !== undefined // don't forget this one!
){return true}
于 2010-12-25T02:34:12.193 回答
0

当然，浏览器检测是选择 CSS 样式的好方法。（根据你的问题）。

于 2010-12-24T21:16:42.063 回答
0

通常，您要为浏览器更改 CSS 的原因是 IE。为此，您应该使用 IE 的条件注释支持来包含仅适用于 IE 的样式表或内联样式。例如：

<link rel="stylesheet" type="text/css" href="common.css" />
<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

只有 IE6 和更早版本会包含第二个样式表，您可以在其中覆盖早期样式或修复问题。不需要 JavaScript。

于 2010-12-24T21:17:47.723 回答
0

您提出问题的方式，答案是肯定的，使用浏览器检测来设置简单的 CSS 和 JavaScript，具体取决于浏览器。但是，我不认为这是你真正想要问的。

更先进的方法是使用特征检测而不是浏览器检测，即“浏览器是否支持 x？” - 如果确实如此，则执行此操作，否则执行其他操作。

然而，有时这并不总是那么容易做到，因为编写允许测试功能的代码可能不是那么简单。我想说在这些情况下，务实的方法可能是尽可能具体地进行浏览器检测，以期在将来有已知/可靠的方法来测试功能时进行功能检测。

如果您可以通过编辑您的问题提供更多详细信息，我们可能会提供进一步的帮助。

于 2010-12-24T21:17:52.030 回答
0

您可能想研究Modernizr（或至少它的文本阴影测试）。它是一个 JavaScript 库，可以为您执行此功能检测，让您可以根据结果定位 CSS 和 JS。

于 2010-12-24T21:49:09.540 回答