需要帮忙内DIV DIV伸展到内容宽度在Firefox

我使用类似于从这里动态驱动器的一个布局： http://www.dynamicdrive.com/style/layouts/item/css-right-frame-layout/需要帮忙内DIV DIV伸展到内容宽度在Firefox

主要内容区（白色）已溢出设置为自动。我已经给这个主要内容区域内的innerTube一个边界。但是，如果此innerTube内的内容大于主要内容区域的宽度，则按预期显示一个水平滚动条，但在Firefox中，这些内容将“重叠”边框并离开屏幕（可通过水平滚动进行检索）。换句话说，右边框保持原样，内容刚好超过它的操作，并在右栏后面消失。

在IE中，它的行为完全符合我的要求 - 内容将屏幕边框从屏幕上移开，只有在您滚动屏幕后才能看到。

我想最简单的事情就是在这里粘贴源代码。如果你把它复制到一个空白文件中，你会明白我的意思。我只用了一个非常长的单词来复制如果广泛的图像存在，会发生什么情况。

在此先感谢任何能帮助我的人。

<!--Force IE6 into quirks mode with this comment tag--> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 

body{ 
margin: 0; 
padding: 0; 
border: 0; 
overflow: hidden; 
height: 100%; 
max-height: 100%; 
} 

#framecontent{ 
position: absolute; 
top: 0; 
bottom: 0; 
right: 0; 
width: 200px; /*Width of frame div*/ 
height: 100%; 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
background: #cccccc; 
color: white; 
} 

#maincontent{ 
position: fixed; 
top: 0; 
left: 0; 
right: 200px; /*Set right value to WidthOfFrameDiv*/ 
bottom: 0; 
overflow: auto; 
background: #fff; 
} 

.innertube{ 
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ 
} 
.innertubeWithBorder { 
margin: 15px; 
border: solid 1px #666666; 
} 

* html body{ /*IE6 hack*/ 
padding: 0 200px 0 0; /*Set value to (0 WidthOfFrameDiv 0 0)*/ 
} 

* html #maincontent{ /*IE6 hack*/ 
height: 100%; 
width: 100%; 
} 

</style> 

</head> 

<body> 

<div id="framecontent"> 
<div class="innertube"> 

<h1>CSS Right Frame Layout</h1> 
<h3>Sample text here</h3> 

</div> 
</div> 


<div id="maincontent"> 
<div class="innertubeWithBorder"> 

<h1>Dynamic Drive CSS Library</h1> 
<p>AReallyLongWordWhichIsSimilarToHavingAnImageWithWidthGreaterThanTheWidthOfThisDivToShowOverFlowProblemWithBorderSoIfYouResizeThisWindowNarrowerYouWillSeeWhatIMeanWorksFineInIEButNotFirefox</p> 
<p>So I want that border over there ------> to dissappear behind the right hand column like it does in IE, and be visible once you use the scrollbar below and scroll to the right</p> 
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p> 

</div> 
</div> 


</body> 
</html>

来源

2009-10-01 bj.

这里的问题是，你强迫IE怪癖模式。它可以在Chrome，Safari，Opera以及不是IE浏览器的Firefox中运行。摆脱怪癖模式，找到普遍适用的东西。 – cletus 2009-10-01 03:20:21

谢谢克利图斯。我只知道一小部分关于怪癖模式（主要是我在Quirksmode.org上读过的）。在任何情况下，如果摆脱怪癖模式意味着摆脱代码顶部的评论（“强制IE6进入怪癖模式”），那么我试图将其删除，问题仍然发生在Firefox中。虽然谢谢。 – 2009-10-01 04:27:24

有两件事你可以尝试。

<wbr> - 该标签不会在文本中突破，但它会告诉浏览器，如果文本需要打破，应该在这里打破。您可以使用Javascript的substr函数（http://www.quirksmode.org/js/strings.html#substr）将文本拆分，添加<wbr>标签，然后再次合并文本。
width: auto此选项不太可取，因为它可能会破坏您的布局，让它看起来不那么完美。但是，如果在div上设置了它，它将确保div始终大到足以包含其内容。

希望这会有所帮助！

来源

2009-10-01 03:16:52

谢谢约翰。长文本实际上只是为了重新创建不包装的东西。这是真正的问题，我有，这是与广泛的图像indentical。所以想象一下，很长一段文字是一样宽的图像，这就是我想要处理的。我只是用文字让人们更容易粘贴到一个页面中，看看我在说什么。我想我可以链接到一个宽的图像的地方.... 我也试过宽度：自动，但不幸的是它没有工作。 – 2009-10-01 04:30:58

想通了。设置innerTubeWithBorder也是固定的，并使用相同的IE CSS hack使其宽度达到100％高度，然后将其设置为自动溢出。为了获得填充，我在mainContent中为padding使用了padding：5px，并将FF的顶部，底部，右边&设置为5px。

感谢任何想到它的人。

来源

2009-10-02 06:00:08

需要帮忙内DIV DIV伸展到内容宽度在Firefox

回答

相关问题