Question

我有一个奇怪的问题，试图让我的网站徽标在所有浏览器中正确显示。我目前的代码适用于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'

header.sass ：

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

ie8.css ：

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

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

来解决ie8图像重复问题

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

修复sass文件以考虑ie8会破坏所有其他浏览器;图像不再是正确的尺寸。有什么方法可以调和这两个吗？我想尽可能让ie8浏览器工作，但不要牺牲其他浏览器。

Answer 1

IE8需要<!DOCTYPE html> 在你的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'

Answer 2

你可能需要id的hashrocket

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

IE背景图片重复

2 个答案: