html - 响应式列宽在 Internet Explorer 中没有响应

标签 html css wordpress internet-explorer

抱歉,标题太模糊了,但我不知道如何用一句话来表达我非常奇怪的问题。我正在使用响应式 wordpress 主题。响应式网格系统适用于 Firefox,但我无法在 Internet Explorer 开发人员工具中看到网格样式,而且我的所有列都是 100% 宽的。我首先认为这是一个缓存问题,但我禁用了缓存但仍然没有运气。就好像 IE 突然不理解任何样式一样!这是我的网格:

.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%;
}

如果要调试,还有站点 url:http://tinyurl.com/ysq2yu .我不知道为什么 IE 无法呈现这个非常简单直接的 css!我使用的是 Internet Explorer 11,但其他版本显然也有同样的问题。任何帮助深表感谢。

更新 1: 说真的,IE 无法停止让我们的生活变得一团糟!!!并认为我对 IE11 感到兴奋!!!我刚刚在 msdn 中读到条件样式表自 IE10 以来已停止使用,因此我的页面在 IE8 中显示更接近原始页面(我有一个条件样式表并且我通过了我的网格以绝望地尝试解决问题),并且 100% 宽IE10 和 11!!

最佳答案

好的,我发现出了什么问题,您甚至没有调用您的 ie.css,实际上您正在调用它,但对于 IE 低于 IE8 的版本,因此在 IE7 中调用您的样式表,但在 IE8 及更高版本中则不是。所以改变你的条件评论从

<!--[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]-->

类似于

<!--[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]-->

更多信息在这里 http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx .问题是您声明了“lt”(小于)而不是“gt”(大于)条件。只需浏览文档,您就可以轻松找出需要更改的内容。

关于html - 响应式列宽在 Internet Explorer 中没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26023128/

相关文章:

JavaScript 拒绝工作...

javascript css3 每 2 秒更改一次背景颜色

php - WooCommerce 我的账户页面 - 获取订单查询的当前用户

mysql - WordPress 自定义类型帖子下一个上一个连接表

html - flex 的预期生命周期长吗

javascript - 如何检查用户是否可以看到并单击某个元素?

css - Genesis 框架中的 wp_dequeue_style 不起作用

html - 如何使按钮在滚动时固定在底部

JQuery 应该针对 TinyMCE 插件中的类

html - 使用 CSS 垂直对齐 <a> 元素中的文本