Css/浏览器兼容性/joomla

Question

很抱歉，如果之前可能已经回答过这个问题，但我真的可以针对一组特定的情况给出一个特定的答案。除了基本的 css 之外，我对任何东西都很陌生。

描述我的意思的最佳方式是在各种浏览器中查看网站。 http://www.livingwithaddicts.com/ .

我使用 Joomla CMS(2.5 版)将其整合在一起用于慈善事业。

如果您在 Firefox 中查看该站点，它就是(目前还没有完成)它应该看起来的样子。 它在 Chrome 中很好，除了 Opera 中一些容易解决的定位问题外，还过得去。

然后我们进入 IE，我刚刚添加了 background:#485fc5; 以使其部分呈现我想要的效果，并将做同样的事情以获得表单上的背景。

我想探索其他一些样式设置方式，以便它在 IE 中看起来可以接受。我不想沿着用图形替换渐变或文本阴影的路线走下去。

是否有一组 CSS 仅当有人在 IE 中查看时才调用？如果是这样，我该怎么做？这就是所谓的 hack 吗？

其他可能性是，当我使用 Joomla 时，我不得不将一些内联样式放入特定内容中，我认为某些生成的代码可能会被贬低和/或有点困惑。这会影响它的呈现方式吗。

我还匆忙(懒惰地)c&p'ed 了一大块 css 并修改了十六进制值以将其合并到我现有的 css 中。(对于现在不赞成叹息的任何人，我深表歉意)这可能不是最新的语法我前几天才听说过 webkit，所以这就是我的新手。

我会把它贴在这里，希望不会让自己太难堪。如果有人喜欢看(或笑)，那就请吧。我真的很感激任何建议。这是代码。

body {
    background:  #485fc5;       
    background-image: linear-gradient(bottom,  #485fc5 13%, #6e86ee 57%, #a0b0f5 79%);
    background-image: -o-linear-gradient(bottom, #485fc5 13%, #6e86ee 57%, #a0b0f5 79%);
    background-image: -moz-linear-gradient(bottom,  #485fc5 13%,#6e86ee 57%, #a0b0f5 79%);
    background-image: -webkit-linear-gradient(bottom,  #485fc5 13%,#6e86ee 57%, #a0b0f5 79%);
    background-image: -ms-linear-gradient(bottom,  #485fc5 13%, #6e86ee 57%, #a0b0f5 79%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.13, #485fc5),
    color-stop(0.57, #6e86ee),
    color-stop(0.79, #a0b0f5));
}

Answer 1

这不是您问题的具体答案，但应该对您有所帮助。

要定位不支持特定功能的浏览器，请使用 Modernizr .它不会让您专门针对 IE，但它会向 body 标记添加类，以指示是否支持某些属性。然后，您可以通过这种方式使用该类来定位那些对象:

/* target browsers that don't support gradients */
.no-cssgradients {
   background-image: url(some-gradient-image);
}

/* a randomly chosen element on a page that doesn't support border radius */
.no-cssborderradius #some-element {
  border: 1px solid red;
}

这样您不仅可以针对 IE，还可以针对无法处理渐变、半径或许多其他 css 属性的其他浏览器。

此外，对于简单的渐变、边框半径和框阴影，您可以使用 CSS3 PIE ，这将使您能够在 IE(6 及更高版本)中使用这些功能。