强制块元素不包含在IE中（没有固定宽度的父元素）

这是一个相当高度讨论的问题，但经过数小时的研究和试验和错误之后，我仍然无法让下面的HTML表现为期望在IE 7或8或9：强制块元素不包含在IE中（没有固定宽度的父元素）

<html> 
    <head> 
     <title>Untitled Page</title> 
     <style> 
      .container { 
       white-space: nowrap; 
       overflow: auto; 
       position: absolute; 
      } 
      .childContainer { 
       float: left; 
      } 
      .box { 
       float: left; 
       border: 1px solid black; 
       width: 20px; 
       height: 20px; 

      } 
     </style> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="childContainer"> 
       <div class="box"></div><div class="box"></div><div class="box"></div> 
       <!-- repeat until off screen --> 
       <div class="box"></div><div class="box"></div><div class="box"></div> 
      </div> 
      <div class="childContainer"> 
       <span>This should not wrap!</span> 
      </div> 

     </div> 
    </body> 
</html>

的期望的行为如下：

.box的元素必须不换行 - 滚动条将出现在其窗口的底部
.box元素必须具有固定的宽度和高度
。容器和.child容器不能有固定的宽度。 .box的元素的数量是任意
行为必须合理一贯在IE7 +和Chrome的最新版本和Firefox

所提供的HTML适用于Chrome浏览器，我相信这荣誉的空白：NOWRAP甚至块元素。我已经尝试过使用SPAN元素，但是他们需要被强制为一个带float的块元素：left或width属性被忽略。然后他们与DIV元素有相同的问题。

我确定必须有一个解决方案，而不使用JavaScript，但如果一切都失败了，这是一个选项。

来源

2012-02-03 Dale Anderson

'.box的{ 边界：1px的纯黑色; width：20px; height：20px; } '你可以尝试删除浮动：左边到您的.box类 – Murtaza 2012-02-03 07:28:45

http://jsfiddle.net/hjCWN/

我还没有尝试过在IE浏览器，但你可以尝试删除white-space: nowrap;，并更换到margin-right: -99999px;

来源

2012-02-03 07:41:48 biziclop

哇，什么黑客！完美地工作，现在可以将其转化为更为复杂的实际页面布局。太感谢了！ – 2012-02-03 07:54:36

我希望我能理解你原来的绝对/ nowrap/float技巧:) http://jsfiddle.net/hjCWN/3/ – biziclop 2012-02-03 09:00:27

把箱子在表中。这似乎是唯一实用的方法。

当您尝试让.box元素出现在一排，使用float: left都有自己的作用，这是不能被设置white-space被阻止，因为它在不同的级别上运行，可以这么说。但是通过将它们放入表格行中，可以强制它们排成一行。

你甚至可以用表格的那些元素，只是风格细胞分配：

<style> 
table.boxes td { 
    border: 1px solid black; 
    width: 20px; 
    height: 20px; 
    padding: 0; 
} 
</style> 
... 
<table class=boxes cellspacing=0><tr><td>...</td><td>...</td>...<td>...</td></tr></table>

来源

2012-02-03 07:44:34

强制块元素不包含在IE中（没有固定宽度的父元素）

回答

相关问题