问题描述:

I'm having a weird issue trying to get my site logo to display properly across all browsers. My current code works perfectly for chrome, firefox, and safari, but the no-repeat isn't working in ie8.

application layout:

!!!

%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')";

}

I'm able to solve the ie8 image repeat problem by changing my header.sass file to:

#logo

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

Fixing the sass file to account for ie8 breaks all the other browsers, though; the image is no longer the right size. Is there any way I can reconcile the two? I'd like to get the ie8 browsers working if at all possible, but not at the expense of the other browsers.

网友答案:

you probably need the hashrocket for the id

= link_to 'Logo', root_url, :id => 'logo'
网友答案:

IE8 requires a <!DOCTYPE html> in the beggining of your html document in order for a no repeat function to work...

In your case however, you would need to do !!!html

so your code would be

!!!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'
相关阅读:
Top