Question

在我看来，在过去十年中，所有关于HTML / CSS的书籍总是谈论浏览器不兼容性以及如何通过向CSS，JS或HTML添加更多“黑客”来解决这个问题。为什么他们从来没有建议另一种处理方式（我认为最好的方法）是在html文件的第一行添加代码（php，c，等等），检测正在使用的浏览器然后添加适合该浏览器的CSS / JS文件？

Answer 1

过去，您会在JavaScript中添加黑客，以确定客户端使用的浏览器并根据该浏览器运行代码。似乎没有决定采用最佳方式，所以每本书都有自己的实现。

您会在很多旧书中找到确定浏览器的代码，然后在整个代码中您会看到以下内容：

if (NS4) {

} elseif (IE) {

}

但现在很大程度上已经过时了。

我们现在拥有的另一件大事是像JQuery这样的框架，它们希望抽象出一些现有的不兼容性。在我看来，过去人们只会推出自己的风格JQuery-esq框架，因此没有一个统一的社区接受这个框架。

关于用户代理字符串的一个我最喜欢的引用来自Chrome发布：

“因此Chrome使用了WebKit，而且假装是Safari和WebKit 假装是KHTML和KHTML 假装是壁虎，所有浏览器假装是Mozilla，和 Chrome称自己为Mozilla / 5.0 （Windows; U; Windows NT 5.1; en-US） AppleWebKit / 525.13（KHTML，和Gecko一样） Chrome / 0.2.149.27 Safari / 525.13，和用户代理字符串是完整的一塌糊涂，几乎没用，还有每个人假装是其他人，并且混乱很多。“

这是一部很好的喜剧读物 - http://webaim.org/blog/user-agent-string-history/

Answer 2

这是因为服务器/客户端的差异。无法从服务器上运行的代码中检测客户端设置。

HTML中有条件注释，如果您愿意，可以加载备用CSS或Javascript文件。

A Quickie reference on Conditional Comments

Answer 3

因为那时你必须维护两组css和js文件。这与添加“黑客”并没有什么不同，除非您在进行更改时必须对两个文件进行更改。

Answer 4

如果您使用纯粹的浏览器检测，则每次发布新的浏览器或浏览器版本时都需要更新列表。这导致一些荒谬的情况，例如新版本的用户被告知升级降级到旧版本。

浏览器不一致应通过测试功能来处理。正如其他人所提到的，有像JQuery这样的JavaScript框架可以为你处理这个问题。关于CSS，使用条件注释来定位旧版本的Internet Explorer，正如其他人提到的那样。尽量避免使用“hacks”，因为它们可以在较新版本中修复，而无需解决您尝试解决的问题。

Answer 5

为了进一步说明Matthew Vines所说的条件评论看起来有点像......

<!--[if lte IE 6]><link href="LayoutIE6.css" type="text/css" rel="stylesheet" /><![endif]-->
<!--[if gte IE 7]><link href="LayoutIE7.css" type="text/css" rel="stylesheet" /><![endif]-->
<!--[if !IE]><link href="Layout.css" type="text/css" rel="stylesheet" /><![endif]-->

希望这会有所帮助：）

Answer 6

这是因为（大部分和“传统上”甚至）CSS hackery是由前端开发人员实现的，他们并不总是能够访问后端脚本。如果网络开发在早期由后端开发人员驱动，我常常认为事情会有很大不同。

顺便说一下，我认为这根本不是一个坏问题（最初由于某些原因被投票否决）。并且，为了记录，CSS和＆amp ;;的条件评论。像jQuery这样稳定的JS框架绝对是可行的方法。

Answer 7

我认为有更好的解决方案：

简单的解决方案，只需使用此JS库，您就可以轻松地为每个浏览器/操作系统组合应用样式：

BrowserClass.js

通过这个，您将在body标签上获得一个类名，其中包含浏览器的当前名称和版本以及使用过的操作系统。

包含文件后：

<script src="js/browserclass.js"></script>

例如，在具有最新chrome的Windows 8.1上，您将看到：

<body class="chrome chrome34 win desktop">

在您的样式文件中，您可以参考：（.sass造型）

body.chrome
  #example
    color: blue

或

body.win.chrome
  #example
    color: red

注意：

自IE10以来，

[if IE]语句已弃用，因此这是

的解决方案

为不同浏览器创建的不同Web文件

7 个答案: