jQuery 滑块弄乱了我的 CSS 渐变？答案

【问题标题】：jQuery slider messing up my css gradient?jQuery 滑块弄乱了我的 CSS 渐变？
【发布时间】：2011-02-14 13:59:07
【问题描述】：

我在我的页面中放置了一个 jQuery 滑块，当我在它下面添加一个新的 div 并添加 float: left 时，渐变就停在那里。这是LINK。

当我不添加float: left 时，渐变背景是正常的：s...

CSS：

body {
    height: 100%;
    border-top: 1px solid white;
    margin:0;
    background-repeat: no-repeat;
    font-family: 'AandachtBold';
    -webkit-font-smoothing: antialiased;
    background: #cdd6de;!important;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f4f5f5), to(#cdd6de));fixed !important;
    background: -moz-linear-gradient(#f4f5f5, #cdd6de);fixed !important;
    background: linear-gradient(#f4f5f5, #cdd6de);fixed !important;
    -pie-background: linear-gradient(#f4f5f5, #cdd6de);fixed !important;
    behavior: url(/PIE.htc);
}

JavaScript：

<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script src="js/jquery.easing.1.2.js"></script>
<script src="js/smooth-src-comments.js"></script>
<script>
    $(function(){
        $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 3500,
            pause: 2500,
            hoverPause: true
        });
    });
</script>

【问题讨论】：

你是在什么浏览器上出现问题的？
我在我的 macbook 上的 safari、firefox 和 chrome 中查看了它....
编辑：我只在 safari 和 chrome 中看到的问题，有一个白色和绿色的 div。绿色的 div 是左浮动的。并且也没有在 Firefox 中显示......
你能把这个贴在 jsfiddle 上吗？而且，你应该只有一个分号来关闭你的 css 属性，这可能会导致问题。
对不起，你能解释一下你的最后一句话吗？这里的英语有点糟糕......

标签： jquery css gradient

【解决方案1】：

您的 css 代码似乎无效。

例如

  background: #cdd6de;!important;

应该是这样的

  background: #cdd6de !important;

而且我以前从未见过 "fixed" 在渐变上使用过，这可能会导致问题

  background: -moz-linear-gradient(#f4f5f5, #cdd6de);fixed !important;

尝试将我的代码与您的颜色搭配使用，此代码也适用于 Internet Explorer；

  background: #0A284B;
  background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
  background: -moz-linear-gradient(top, #0A284B, #135887);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
  zoom:1;

【讨论】：

谢谢！！我想知道为什么渐变在 IE 中不起作用。这两天学习了一些关于编码的知识。我更像是一名设计师，但它仍然很有趣。 (: