响应列宽在Internet Explorer中不响应

Question

sorry about the very vague title, but I don't know how I can put my very weird problem in one sentence. I am using a responsive wordpress theme. The responsive grid system works fine for firefox, but I can not see the grid styles in internet explorer developer tools and all my columns are 100% wide. I thought first that it was a caching problem, but I have disabled caching and still no luck. it is as if IE suddenly doesn't understand any of the styles! here's my grid:

.wpb_row {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* Grid with fluid columns */
.vc_row-fluid {
  width: 100%;
  *zoom: 1;
}
.vc_row-fluid:before,
.vc_row-fluid:after {
  display: table;
  content: "";
}
.vc_row-fluid:after {
  clear: both;
}
.vc_row-fluid [class*="vc_span"],
.vc_row-fluid [class*="vc_col"] {
  display: block;
  width: 100%;
  min-height: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 3%;
}
.vc_row-fluid [class*="vc_span"]:first-child,
.vc_row-fluid [class*="vc_col"] {
  margin-left: 0;
}
.vc_row-fluid .vc_span12,
.wpb_teaser_grid.wpb_carousel .vc_span12,vc_span12, .vc_row-fluid .vc_col-sm-12 {
  width: 100%;
}
.vc_row-fluid .vc_span11, vc_span11, .vc_row-fluid .vc_col-sm-11 {
  width: 91.41666666666667%;
}
.vc_row-fluid .vc_span10 , vc_span10, .vc_row-fluid .vc_col-sm-10{
  width: 82.83333333333333%;
}
.vc_row-fluid .vc_span9, vc_span9, .vc_row-fluid .vc_col-sm-9 {
  width: 74.25%;
}
.vc_row-fluid .vc_span8, vc_span8, .vc_row-fluid .vc_col-sm-8 {
  width: 65.66666666666666%;
}
.vc_row-fluid .vc_span7, vc_span7, .vc_row-fluid .vc_col-sm-7 {
  width: 56.83333333333333%;
}
.vc_row-fluid .vc_span6,
.wpb_teaser_grid.wpb_carousel .vc_span6, vc_span6, .vc_row-fluid .vc_col-sm-6 {
  width: 48.5%;
}
.vc_row-fluid .vc_span5 , vc_span5, .vc_row-fluid .vc_col-sm-5 {
  width: 40.16666666666667%;
}
.vc_row-fluid .vc_span4,
.wpb_teaser_grid.wpb_carousel .vc_span4, vc_span4, .vc_row-fluid .vc_col-sm-4 {
  width: 31.33333333333333%;
}
.vc_row-fluid .vc_span3,
.wpb_teaser_grid.wpb_carousel .vc_span3 , vc_span3, .vc_row-fluid .vc_col-sm-3 {
  width: 22.75%;
}
.vc_row-fluid .vc_span2, vc_span2, .vc_row-fluid .vc_col-sm-2 {
  width: 14.16666666666667%;
}
.vc_row-fluid .vc_span1, vc_span1, .vc_row-fluid .vc_col-sm-1 {
  width: 5.583333333333333%;
}

and the site url if you want to debug: http://tinyurl.com/ysq2yu . I have no idea why IE fails to render this very simple and straight forward css! I am using internet explorer 11, but other versions apparently has the same problem too. Any help is much appreciated.

Update 1 : seriously, IE just can't stop making our lives hell!!! and to think that I was excited about IE11!!! I just read in msdn that conditional stylesheets have been discontinued since IE10, so my page is showing closer to original in IE8 ( i have a conditional stylesheet and I passed my grid in a desperate attempt to solve the problem), and 100% wide in IE10 and 11!!

Answer 1

Ok I found whats wrong, you're not even calling your ie.css, actually you ARE calling it but for IE's less than IE8, so in IE7 your stylesheet is called but in IE8 and above it's not. SO change your conditional comment from

<!--[if lt IE 8]><link rel="stylesheet" href="http://www.pwmania.com/wp-content/themes/PWMNewsMorning/lib/css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

to something like

<!--[if gt IE 8]><link rel="stylesheet" href="http://www.pwmania.com/wp-content/themes/PWMNewsMorning/lib/css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

More info here http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx .The thing is that you declared 'lt' (less than) not 'gt'(greater than) condition. Just go trough documentation you'll easily figure out what you need to change.