空白：在 IE 中不换行不起作用答案

【问题标题】：white-space: no-wrap in IE not working空白：在 IE 中不换行不起作用
【发布时间】：2015-01-08 16:21:26
【问题描述】：

这在 chrome 中运行良好，但 IE 不喜欢它并破坏了 content-main div。检查了word-wrap: break-word，如此处所述white-space: nowrap is not working in IE in a horizontally scrolling box，但我在任何地方都没有。

这是一个小提琴http://jsfiddle.net/02hgaahe/，虽然 IE 中的小提琴显示正确....奇怪。

这是我的代码。

HTML-

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 7, 2015, 2:31:39 PM
*/

body {
		font-family:arial,helvetica,sans-serif;
		font-size:12px;
	}
        #wrapper {
		
		margin:0px auto;
		border:1px solid #bbb;
		padding:10px;
                height: 90%;
	}
        #header {
		border:1px solid #bbb;
		height:80px;
		padding:10px;
	}
        #header > #content-main{
            width:200px;
            height:80px;
            border: 1px solid #bbb;
        }
	.content {
            
		margin-top:10px;
		padding-bottom:10px;
                white-space: nowrap;
                overflow-x: visible;
                overflow-y: hidden;
                height:320px;
	}
	.content div {
		border:1px solid #bbb;
	}
	.content-main {
            display: inline-block;
		width:500px;
                height:300px;
	}
	#footer {
		margin-top:10px;
		padding:10px;
		border:1px solid #bbb;
	}
	#bottom {
		clear:both;
		text-align:right;
	}

<div id="wrapper">
            <div id="header">Header</div>
            <div class="content">
                <div class="content-main">Left</div>
                <div class="content-main">main</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
                <div class="content-main">right</div>
            </div>
            <div id="footer"></div>
            <div id="bottom"></div>
        </div>

编辑：删除了重复的 ID 和不正确的评论。

但它仍然显示不正确。

编辑：我认为问题在于 Internet Explorer 对 Intranet 站点的兼容性设置，我不知道 IE 将所有 Intranet 站点默认为兼容模式（基本上是 IE7）。

【问题讨论】：

//padding:10px; 在 CSS 中无效。 CSS 中的注释以/* 开头，以*/ 结尾。
请使用类，因为多个重复的 id 是错误的。所以 IE 告诉你，“我找到了一个 id 为 content-main 的 div，而且由于 id 是唯一的，我不会再找到另一个”
@JamesDonnelly：我认为这里的问题更多是重复的 id，以及使用 IE。
@jbutler483 我没说那是问题所在。
@Shadymilkman01 什么white-space 属性显示在开发者工具的计算样式面板中？另外，您使用的是哪个版本的 IE？

标签： html css internet-explorer

【解决方案1】：

是时候在黑暗中拍摄了！

您还记得 HTML 文件开头的 <!DOCTYPE html> 吗？如果没有它，旧 IE 版本将默认为 Quirks 模式，这在 CSS 方面可能无法正常运行。

【讨论】：

是的，我做到了，但仍然没有雪茄。不过谢谢！

【解决方案2】：

我认为这里的问题是您使用了重复的 id。

如果您想将一个 div 的效果“复制”到另一个上，请尝试改用 class。

使用类使“类”可重用，与使用“id”不同，“id”应该唯一且不重复。复制 ID 会导致各种有趣的错误/故障。

类似：

body {
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
}
#wrapper {
  margin: 0px auto;
  border: 1px solid #bbb;
  padding: 10px;
  height: 90%;
}
#header {
  border: 1px solid #bbb;
  height: 80px;
  padding: 10px;
}
#header > #content-main {
  width: 200px;
  height: 80px;
  border: 1px solid #bbb;
}
#content {
  margin-top: 10px;
  padding-bottom: 10px;
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
  height: 320px;
}
#content div {
  /*padding:10px;*/
  border: 1px solid #bbb;
}
.content-main {
  display: inline-block;
  width: 500px;
  height: 300px;
}
#footer {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #bbb;
}
#bottom {
  clear: both;
  text-align: right;
}

<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">
    <div class="content-main">Left</div>
    <div class="content-main">main</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
    <div class="content-main">right</div>
  </div>
  <div id="footer"></div>
  <div id="bottom"></div>
</div>

作为旁注，正如@James 所说，css 中的 cmets 看起来像 /*comment*/ 而不是 //comment

【讨论】：

如果你的小提琴在 ie 中正确显示，那么一定有其他的 css 对此起作用。您能检查一下是否还有其他您未包含的规则吗？