Question

因此，我了解浏览器检测（即。navigator.userAgent）不应用于决定使用哪个对象方法/属性;但是，我想根据浏览器设置一些简单的CSS和JavaScript。但是，仅仅证明一个全新的StyleSheet是不够的。如果我使用浏览器检测来决定应用于元素的CSS，那么可以吗？

修改

好的，我们是具体的。我在谈论按钮内的text-shadow（<input type="button"/>）按钮内的文字并非在所有浏览器中都垂直居中，因此我根据浏览器使用JS调整此内容。

Answer 1

不应该做什么都不错！另一方面，浏览器检测似乎已被“对象检测”所取代：

SitePoint采用浏览器嗅探：http://blogs.sitepoint.com/2009/05/31/why-browser-sniffing-stinks/
Stackoverflow自己的调查：Why is browser sniffing not a recommended practice?

Answer 2

您似乎想要一个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，即使是浏览器嗅探标准也很麻烦且不可靠。

ETA：

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

您不需要浏览器嗅探。只需包含规则。如果它有效，它就会起作用，如果它没有你没有失去任何东西。

如果要为不支持它的浏览器提供备份样式，可以使用其他规则：

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';

Answer 3

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

Answer 4

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

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

请注意不需要，也不应设置样式。如果您设置任何其他对象属性，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}

Answer 5

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

Answer 6

通常，您希望更改浏览器的CSS的原因是针对IE。为此，您应该使用IE的conditional comments支持来包含仅适用于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。

Answer 7

你表达问题的方式，答案是肯定的，使用浏览器检测根据浏览器设置简单的CSS与JavaScript。但是，我不认为这是你真正打算提出的问题。

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

但有时候，这并不总是那么容易实现，因为编写允许测试功能的代码可能并不那么简单。我要说的是，在这些情况下，实用的方法可能是尽可能具体地进行浏览器检测，以便在将来有特征检测的时候，有已知/可靠的方法来测试某个功能。

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

Answer 8

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

浏览器检测，做和不做。这个可以吗？

8 个答案: