Css IE背景图像重复

我遇到了一个奇怪的问题，试图让我的网站徽标在所有浏览器中正确显示。我目前的代码在chrome、firefox和safari上运行得非常好，但在ie8中不能重复

应用程序布局：

!!!
%html
  %head
    = stylesheet_link_tag 'application'
    = javascript_include_tag 'application'
    /[if lt IE 9]
      = stylesheet_link_tag 'ie8/ie8'
  %body
    %header
      %ul.navbar
        %li
          = link_to 'Logo', root_url, id: 'logo'

#logo
  background-size: 100% Auto
  background-repeat: no-repeat
  background-image: url(logo.png)

#logo {
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='logo.png',
    sizingMethod='scale')";
}

标题。sass：

!!!
%html
  %head
    = stylesheet_link_tag 'application'
    = javascript_include_tag 'application'
    /[if lt IE 9]
      = stylesheet_link_tag 'ie8/ie8'
  %body
    %header
      %ul.navbar
        %li
          = link_to 'Logo', root_url, id: 'logo'

#logo
  background-size: 100% Auto
  background-repeat: no-repeat
  background-image: url(logo.png)

#logo {
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='logo.png',
    sizingMethod='scale')";
}

ie8.css：

!!!
%html
  %head
    = stylesheet_link_tag 'application'
    = javascript_include_tag 'application'
    /[if lt IE 9]
      = stylesheet_link_tag 'ie8/ie8'
  %body
    %header
      %ul.navbar
        %li
          = link_to 'Logo', root_url, id: 'logo'

#logo
  background-size: 100% Auto
  background-repeat: no-repeat
  background-image: url(logo.png)

#logo {
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='logo.png',
    sizingMethod='scale')";
}

我可以通过将header.sass文件更改为：

#logo
  background: 'logo.png' no-repeat 100% Auto

不过，修复sass文件以解释ie8会破坏所有其他浏览器；图像大小不再正确。有什么办法能使这两件事和解吗？如果可能的话，我希望ie8浏览器能够正常工作，但不能以牺牲其他浏览器为代价。

ie8需要

在你的html文档中，为了让一个不重复的函数工作

但是，在您的情况下，您需要执行

！！！html

所以你的代码是

!!!html

    %html
      %head
        = stylesheet_link_tag 'application'
        = javascript_include_tag 'application'
        /[if lt IE 9]
          = stylesheet_link_tag 'ie8/ie8'
      %body
        %header
          %ul.navbar
            %li
              = link_to 'Logo', root_url, id: 'logo'

---

您可能需要hashrocket来获取id

= link_to 'Logo', root_url, :id => 'logo'

---

我不确定你能否在背景中加入背景大小。没有做太多的研究来支持我自己，看起来100%会与背景位置相关。当我拿出

100%自动

时，标志刚刚在chrome/safari/firefox中消失了。这对ie没有任何影响。如果我保留了background size属性，并且没有重复使用

background:'logo.png'

，那么所有浏览器都无法正常工作。哦，对不起，我的html中有这个属性，我只是忘了把它放在我的问题中。我会修好的。