Question

这在Chrome中运行良好，但IE不喜欢它并且打破了内容主要的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）。

Answer 1

在黑暗中拍摄的时间！

您是否记得HTML文件开头的<!DOCTYPE html>？没有它，旧的IE版本将默认为Quirks Mode，在CSS方面可能表现不正常。

Answer 2

我认为这里的问题是你正在使用重复的id。

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

使用类可以使'class'可重用，不像使用'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中的评论看起来像/*comment*/而不是//comment

空白：IE中的无包装无法正常工作

2 个答案: