IE 7 和 8 没有显示完美的设计视图答案

【问题标题】：IE 7 and 8 not showing perfect design viewIE 7 和 8 没有显示完美的设计视图
【发布时间】：2014-05-05 22:00:47
【问题描述】：

我在 IE 7、8 中遇到问题。

我在 Firefox、Chrome、Opera 和 IE 9、10、11 中展示 3 个产品/行

它向我展示了完美的设计。但在 IE 7,8 中，它改变了完整的产品设计。

我不知道如何在 IE 7、8 中获得完美的产品视图

我该怎么做？

【问题讨论】：

这可能是浮动问题或您面临的位置问题可以删除链接或标记或 jsfiddle 将有助于调试
可以提供html/css吗？
对不起兄弟没有链接没有代码——但我在完成 css 工作，在 IE 9 10 11 中它向我展示了完美的视图，但在 IE 7 8 中它在一列中向我展示了所有产品

标签： html css wordpress internet-explorer

【解决方案1】：

我非常讨厌 IE，尤其是版本 6、7 和 8。当你设计一个 wordpress 主题时，你必须设置两次样式，一次用于合适的浏览器，然后用于 IE 古人。要记住的另一件大事是，这些古人不支持媒体查询。

因此，要解决您的问题，请创建一个名为 ie.css 的样式表。您将使用它来为 IE 7 和 8 进行所有样式设置。

接下来，您需要将该样式表排入队列，但我们将有条件地将其排入队列。此样式表只会加载到 IE8 的 IE 版本。所以在你的functions.php中，添加以下内容

function enqueque_ie_stylesheet() {
// Load the Internet Explorer specific.  stylesheet.
 wp_enqueue_style( 'style-ie',   get_template_directory_uri() . '/ie.css',   array(), '' );
    wp_style_add_data( 'style-ie', 'conditional', 'lt IE 9' );
 }
add_action( 'wp_enqueue_scripts', 'enqueue_ie_stylesheet' );

您现在可以在ie.css 中添加您的样式。如果您使用的是子主题，请记住将 get_template_directory_uri 更改为 get_stylesheet_directory_uri

【讨论】：

嗨@Pieter Goosen，感谢您的回答，我达到了 80%，但我的产品显示在一行中，我想向他们展示 3 个产品/行。你能帮我吗
很高兴我能帮上忙。您需要检查原始样式表中哪些元素为您提供了所需的布局，然后将其复制到您的 ie.css。它的宽度在 30% 到 33% 之间。不幸的是我不能告诉你确切的位置，因为我不知道你的主题。在谷歌浏览器中检查您的主题并检查哪些元素是相关的。我认为这应该是媒体查询中的内容。请记住，IE7 和 8 不接受这一点。因此，如果您在媒体查询中复制代码，请不要复制媒体查询，只复制里面的内容
如果您不正确，请添加指向您网站的链接。看看我能从中得到什么
thanx alot bro - 它完成了，实际上我在粘贴你的代码后犯了一些错误，所以我弄清楚了它完成了 - +2
我的荣幸。很高兴你想通了

【解决方案2】：

您可以使用 CSS hack。 “hack”是值之后和结束分号之前的 \9。这将针对 IE8 及更低版本。

例子：

.element {  
    margin-bottom: 20px;  
    margin-bottom: 10px\9;  
}

【讨论】：

虽然您的代码可能有效，但问题在于媒体查询。 IE7 和 8 将简单地忽略媒体查询中的任何样式，即使使用了您的方法。这是一个几乎让 IE 沉没的巨大设计缺陷
同意。该代码是一种解决方法。毕竟不能改变 IE7 的行为。