Question

我的同事和我正在艰难地决定ie6的最佳实践方法，即支持我们正在构建的网站。该网站适合年龄较大的人群，因此不支持这些浏览器是不可能的。

与此同时，我们正在尝试将现代编码实践纳入我们的工作中，以便我们能够进行实践并充分了解能力。我想与你们联系的特定领域是处理CSS3背景的后备。

如果我们要使用CSS3背景并且不为背景添加无关的包装标签，我们在这里有两个选择：

使用：after，：before等伪元素，用于向元素添加多个背景。（这是我们现在的选择）
使用CSS3多个背景规范

这会产生更优雅的标记，并且肯定是朝着正确方向迈出的一步。但是那些不支持这些功能的浏览器呢？

Modernizr.js告诉我们检查特定支持，然后写回退：

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

但是，对于特定功能的实际回退，我们没有给予太多指导。那么，在类似CSS3背景的情况下，什么是有效的后备策略？

我们（例如）是否会使用jQuery将我们需要的额外标签（即btn-container，nav-container等）包裹在导航项，按钮和容器周围，以便有额外的元素来添加样式属性？

Answer 1

关于CSS3 multiple backgounds和/或background gradients我认为有一种方法比您提出的方法更好：CSS3 Pie。

通过这种方式，您可以在IE6,7和8中使用所有这些不错的效果（包括border-radious），无需任何JavaScript干预。

Answer 2

<强> 1。优雅地失败。某些复杂的元素可以用CSS隐藏，并在使用JavaScript加载页面时显示，具体取决于浏览器作为一个例子。

<强> 2。条件样式表或JavaScript修复。花费大量时间修复每个浏览器中的每个问题，并为其编写样式表。此外，您可以尝试各种声称可以使旧版浏览器符合规范的JavaScripts。我尝试过 this JavaScript ，但它似乎与jQuery冲突。 CSS Pie 是为旧版浏览器添加圆角的另一种选择。

第3。忽略旧浏览器。对旧版浏览器不做任何特殊处理。 IE6 / 7上的人们已经看到了与其他人不同的世界。或者，对旧版浏览器不做任何特殊处理，但要积极避免过于复杂的功能。特征。或者，您可以轻松添加漂亮的 "upgrade notification" message 。

Answer 3

我们（例如）是否会使用jQuery将我们需要的额外标签（即btn-container，nav-container等）包裹在导航项，按钮和容器周围，以便有额外的元素来添加样式属性？

这肯定是一种有效的后备方法。但是，根据设计和所讨论的元素，您可能会发现仅提供主要背景就足以产生一个看起来像样，功能完善但功能完全相同的组件。

“支持”旧浏览器并不总是意味着“付出巨大努力/编写大量额外代码以确保近距离视觉匹配”。提升QA团队是很困难的，但并非不可能，因为他们理解渐进增强的概念，因为它可以应用于纯视觉呈现的各个方面。

CSS3背景的最佳实践和对旧版浏览器的支持？

3 个答案: