35

通常，当我浏览 Internet 时，我发现人们通常使用 CSS hack 来使他们的网站在所有浏览器中看起来都一样。就个人而言，我发现找到所有这些黑客并对其进行测试非常耗时；您所做的每个更改都必须在 4 个以上的浏览器中进行测试，以确保它不会破坏其他任何东西。

大约一年前，我在 Internet 上查看了其他主要站点（雅虎、谷歌、BBC 等）正在使用的内容，发现其中大多数都在进行某种形式的浏览器检测（JS、HTML if 语句、基于服务器）。我也开始这样做了。在我最近工作的几乎所有网站上，我都使用 jQuery，所以我使用内置的浏览器检测。

您是否有理由使用或不使用其中任何一种？

4

15 回答 15

30

还有第三种选择：

最小化或消除对浏览器检测和 CSS hack 的需求。

我尝试使用 jQuery 插件之类的东西来为您处理任何浏览器差异（对于小部件等）。这并不能解决所有问题，但它做了很多工作，并且已经将支持多个浏览器的工作委托给了已经花费并将花费比您能够负担或想要的更多精力的人。

之后，我遵循以下原则：

  • 使用我所说的最小 CSS，这意味着只使用被广泛支持的特性；
  • 如有必要，使用表格进行复杂布局。你可能不喜欢这样，但坦率地说，做并排布局之类的事情，表格将在十年前的浏览器上工作，并且比让 div 使用绝对定位、浮动等组合的工作要少得多；
  • 通过添加 DOCTYPE 强制 IE6 进入严格模式而不是怪癖模式。我不能强调这会让你的生活变得多么容易，但奇怪的是很多人似乎还没有这样做；
  • 通过使用正确的 DOCTYPE 或使用嵌套块元素而不是其他盒模型技巧来最小化盒模型问题；和
  • 如有必要，包括相关浏览器的额外 CSS 文件。我倾向于在服务器上而不是在生成页面的客户端上执行此操作（让我们面对现实，这是其中的大多数）。我从事的许多项目都有 IEfix.css 文件。

之后，我将浏览器分为几层：

第一层：

  • 火狐3；
  • IE7。

我的网站必须在这些方面工作。

2级：

  • 火狐2；
  • 苹果浏览器;
  • 歌剧;
  • 铬合金。

我的网站应该在这些上工作。这可能会冒犯一些人，但坦率地说，这些浏览器的市场份额是如此之低，以至于它们根本不如 Firefox 3 或 IE7 重要。

第 3 层：

  • IE6;
  • 其他。

除非是例如公司要求，否则将尽可能少地处理这些问题。IE6 是一场噩梦，但截至 12 月它的市场份额为 20%，而且还在迅速下降。此外，还有一些有效的安全问题（例如在金融网站上）劝阻甚至禁止使用 IE6，因此像Paypal 这样的网站已经阻止了 IE6，而谷歌告诉用户放弃 IE6。

于 2009-01-18T09:28:36.310 回答
11

问题是你真的只对 css 进行了一次尝试（因为它在客户端几乎是静态内容）......你不能（轻松）调整它以适应客户端的运行 - 所以对于那些棘手的人不兼容的情况（而且它们太多了），遗憾的是，检测是最好的途径。我看不到这种变化很快。

使用 javascript，您通常可以通过（如您所说的）jQuery 之类的库来避免这种痛苦 - 并检查功能支持而不是识别特定的浏览器（大部分时间）。有些情况您需要准确了解（例如，盒子模型）。

于 2009-01-18T09:21:51.770 回答
6

您是否有理由使用或不使用其中任何一种？

是的。如果 JavaScript 被停用，客户端浏览器检测会中断，并且可能无法在未来的浏览器版本中正常工作。最后一个原因也适用于 CSS hack。如果用户明确尝试破坏服务器端浏览器检测，它就会中断，但它仍然可能是一个可行的替代方案。

我会推荐：

确保您的代码在符合标准的浏览器中工作 - 即在其中一个或两个中开发，然后检查browsershots.org。很可能有可能使用一个样式表在所有这些中实现所需的结果。

然后是IE。如果只有几个问题，您可以使用 CSS hack。否则，使用条件注释。

编辑：

如果我还必须支持古代浏览器，我通常会采用优雅降级的方式：我会让它们显示带有基本样式表（字体大小、颜色等）的纯 html。所有花哨的东西都会被@import规则隐藏起来。

于 2009-01-18T10:20:24.677 回答
4

我通常喜欢为 Firefox 和 Safari 等符合标准的浏览器提供样式表，然后使用条件注释来检测 Internet Explorer 并为其提供包含 IE 特定修复和覆盖的附加 CSS 文件。

于 2009-01-18T10:35:29.000 回答
3

在以编写 HTML 和 CSS 为生的 6 年中，我的绝大多数 CSS 问题都来自 Internet Explorer。

正如在其他答案中指出的那样，您可以使用条件注释为 IE 提供额外的样式表（或向<body>或<html>`` element, if you don’t like multiple stylesheets). Unlike CSS hacks, conditional comments are explicit and supported. Unlike trying to detect IE from the用户代理字符串添加一个类，它们保证可以工作。

至于非 IE CSS 问题，我从未发现值得浏览器检测的问题。

于 2009-08-19T02:12:13.507 回答
2

对浏览器来说，hack 更快，但如果你的结构正确，浏览器检测会在你的 CSS 中提供更好的可读性。如果您可以进行浏览器检测，同时可以在浏览器之间共享 CSS，并且仅在单独的文件或其他文件中具有不同的 CSS，那么我会使用浏览器检测 - 因为这是新手可以理解的东西，CSS hacks如果你不认识他们就很难理解

于 2009-01-18T09:22:48.413 回答
2

我更喜欢使用浏览器检测并将独立于浏览器的 CSS 放入自己的文件中。

然而，最好的解决方案是找到默认交叉兼容的 CSS 并直接使用它。

于 2009-01-18T09:23:44.527 回答
2

我尽量不使用。在很多情况下，可以通过稍微简化标记结构来避免 IE 的问题。

如果您使用像Eric Meyer's这样的体面的 CSS 重置，它也会有所帮助。

作为原则，我也在缓慢但肯定地放弃对 IE6 的支持，特别是考虑到 IE6 和 IE7 的最新安全问题——如果我们继续支持糟糕的浏览器，我们不会改变人们的浏览习惯和浏览器偏好。

于 2009-01-18T14:42:13.660 回答
2

仔细考虑以上所有内容，尤其是关于 doctype 的指针。如果你必须应用 CSS hack，对于特定的浏览器来说，hack 几乎总是可以避免的。特别是对于干燥的静态页面。

从开发这些东西的有限经验来看......我假设你想制作一个没有凌乱的 Adoobi 购买软件的流畅网页：

  • 编写一个在这些浏览器上看起来合理的页面，所有这些都可以在一台机器上测试：

Op3ra 9.6, S@fari 3, Chr0me 1, 1nternet Xpl0rer 6, 7 & 8, Firefux 1.5

  • 使用@import css 规则抛弃古代浏览器中的 css，让他们吃蛋糕。

  • 结合使用对象检测和浏览器嗅探来查找和消除问题浏览器（低于上述目标的所有版本）。还要赶上你知道速度不快的古代浏览器（你可以测试并与已知值比较的 css 属性），以防它们通过嗅探器，也可以使用条件注释踢出 1E5 给它一些反 css让它平静下来，与 ie6 类似，但如果可能的话，请将其保存在 jQu3ry 中。

  • 使用动态元素将 jQu3ry 库加载到允许的浏览器中（任何未通过仔细测试的浏览器）。即，当我们知道它不起作用时，我们甚至不导入库/我们让其他人进入。

  • 使用 jQu3ry 解决您支持的浏览器中的任何问题，其中大部分问题只有在您的页面变为动态时才会显现出来。使用 jQu3ry 增强布局并添加到您的界面等...

  • 通过媒体声明对此进行扩展，您可以测试这些设备独有的 css 值，现在您将拥有更多用于调整布局的知识（即销毁这些列并缩小这些图像）。关闭动画等等。

  • 如果您必须使用华丽的菜单人先生，请始终使用文本标签和一些定位技巧使其消失，以使其易于访问……只是不要仅依靠图像或 Javascript 来浏览您的网站。

  • 它很容易阻止任何低于 Netsc@pe 的内容 4. 只为他们提供基本的 Web，这是最初的方式。即，甚至不为它们指定背景或颜色、字体或任何东西。浏览器的默认设置应该可以正常工作。该信息将是可访问的。

事实上，我将所有“可访问”浏览器的 ID 设为 4 美元，这样我们就可以轻松地将它们从动态演示中剔除，并避免让残障人士陷入困境。

唉，她是一艘好船，但即使是一艘用来吓唬 M$ 的好船也必须死。不要害怕，因为我们现在有一个更好的；）

只是我的2美分，谨慎申请。

于 2009-02-05T03:27:03.953 回答
2

检测浏览器服务器端有什么问题？似乎非常有效且万无一失（除非用户更改其用户代理字符串）。您可以使用 PHP 为页面选择样式表或为每个请求动态生成它 - 不确定其他语言是否允许您直接输出到文件并让您手动设置标题，但我无法想象他们不会让您识别用户代理，因此这些选项之一可能适用于任何服务器端环境。

于 2009-06-29T07:03:44.963 回答
1

hacks 总是会增加你的工作量，并且应该优化工作量

首先，您添加了 hack，然后开始担心它们在不同浏览器和不同机器上的行为。

相反，您可以依赖供应商特定的 css 扩展 http://reference.sitepoint.com/css/vendorspecific

于 2009-06-29T07:36:37.500 回答
1

[我的做法][1] 使用一个PHP类来检测操作系统、浏览器和浏览器版本。

[1]：我使用 PHP 类检测操作系统、浏览器和浏览器版本的方法 http://reinholdweber.com/css/css-hacks-browser-version-detection-a-new-approach/

于 2009-08-01T11:36:52.507 回答
0

就个人而言，我发现找到所有这些黑客并对其进行测试非常耗时；您所做的每个更改都必须在 4 个以上的浏览器中进行测试，以确保它不会破坏其他任何东西。

您不必在每个浏览器上测试“正确”的 CSS hack。

这个想法是您编写符合标准的代码，然后添加特定的黑客攻击以针对一个且只有一个出错的浏览器（或渲染引擎）。例如，编写“* html #myelement”以仅针对 IE6 的异常：没有其他浏览器会受到该 hack 的影响，因此无需对其进行详尽的测试。如果一些新的不起眼的浏览器出现并犯了与 IE6 完全相同的错误，那么它只会出错，这极不可能，不是你的错，而且你可以期望很快得到修复。

有些东西自称为 CSS hack，但使用了无效的结构，例如“_propertyname”hack。这可能会跨浏览器中断，因为当您使用无效代码时，每个浏览器可能会以不同的方式解释它。不要使用这些。

老实说，这无论如何都不是以前的问题了，主要是因为 IE5 已经死了。如果您使用标准模式文档类型并写入标准，它将主要在当前的浏览器中工作。唯一真正剩下的问题案例是 IE6，您可以使用“* html”定位它；您不太可能需要更多的 CSS hacks 方式。幸运的是，Box Model Hack 的时代已经结束。

于 2009-01-18T14:27:00.773 回答
0

听你的代码！肯特贝克说。在 Wing-Tsun 中，他们说：就像弯曲的水一样！或者其他的东西。

看，这是一个让 IE5 理解 html5 的 CSS Hack：http: //blog.whatwg.org/styling-ie-noscript。

使用 JS 也是如此：http: //blog.whatwg.org/supporting-new-elements-in-ie。

将 5 页的 hack 解释与 5 行易于理解的代码进行比较。所以，使用 JS。

事物有其好处和坏处。你对事情的理解和实际代码的优雅引领了方向。

于 2009-01-18T22:41:39.027 回答
0

CSS hacks 不可行，因为浏览器一直在更新，新的更新可能会破坏您的 hack，而通过 Javascript 浏览器检测，您可以准确地确认浏览器的功能。但是，另一种选择是使用最少的 CSS 来确保在所有情况下一切正常。用于 UI 的 JQuery 和其他 javascript 库对浏览器的功能具有内置检测功能，因此您应该检查一下。

于 2009-06-29T06:54:05.467 回答