IE8中CSS浮动属性中的问题

Question

I have been created simple webpage by using html and css.

Here is the worked jsfiddle, http://jsfiddle.net/y7xmr6ct/ [part of work only]

In header cart-summary section displayed in all browsers expect ie like this: http://s4.postimg.org/tuvx8avt9/Untitled_1.png

But in ie8, displayed left side of my header.

I tried to use clear:left; or width:100%; to my class .large--right, but nothing change.

Here is my css:

.large--right {
    float: right !important;
    }

and also I in my #footer {border-top: 1px solid #ddd;} didn't work in ie8

May i know, how can i fix this?

Can anyone help me to fix this, thanks in advance.

Answer 1

IE8 does not support media queries. You're code is mobile first and so because the media queries aren't firing, the layout is the mobile styles.

Take a look at RespondJS for media query support in IE8.