CSS 溢出 Firefox 问题答案

【问题标题】：CSS Overflow Firefox issueCSS 溢出 Firefox 问题
【发布时间】：2012-08-01 21:45:20
【问题描述】：

我正在尝试编写一个 CSS，当用户编写文本时它会溢出而不是滚动条或隐藏，它就像在普通 Word 文档中一样下降。我有这个代码：

#content-text {
    width: 960px;
    padding-left: 10px;
    padding-right:10px;
    text-align: left;
    color:#000;
    height:100%;
    margin-left: 25px;
    margin-right:25px;
}

奇怪的是，虽然这段代码实际上在 Firefox 的 IE 中执行了我想要的操作，但它会溢出并变成滚动条。我试过溢出：自动；溢出：隐藏；和溢出：继承；只是想看看是否有任何帮助，但到目前为止还没有运气，老实说，我不知道为什么在 Firefox 中会发生这种情况，=/你们中有人知道吗？

更新：我试过溢出：可见；但我只是得到了溢出......很明显，但它仍然没有包装。到目前为止，仅在 Firefox 中。 =/

更新：唯一可能会影响的事情是我有另一个 CSS 代码，并且包含第一个：

#content-title{
    background-color: transparent;
    background-image: url(../img/content-title-body.png);
    background-repeat: repeat-y;
    background-attachment: scroll;
    background-x-position: 0%;
    background-y-position: 0%;
    height:auto;
    position:absolute;
    z-index :100; /* ensure the content-title is on top of navigation area */
    width:1026px;/*1050px*/
    margin: 160px 100px 5px 100px;
    overflow: visible;
    top: 55px;
}

而使用它的 HTML 是：

<div id="content-title">
                <div id="content-text">             Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola! 
        </div>
</div>

【问题讨论】：

我的问题实际上是宽度，高度完美=)
这在 Firefox 3 中适用于我 - 您是否可以发布更多可能导致该问题的代码？

标签： html css firefox overflow

【解决方案1】：

所以你的 css 可能没问题。例如在我的页面上，我的 css 是这样的：

 textarea.input_field2 {
    margin: 10px 10px 10px 0px;
    width: 440px;
    height: 150px;
    background:#696969; 
    color: white;
    border: none;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
    }

然后在正文中我这样称呼它：

 <textarea rows="9" cols="9" class="input_field2" name="user_comments"></textarea>

它工作正常。但是请确保在测试时使用 Lorem Ipsum 之类的东西来测试它，使用带空格的单词而不是像 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' 这样的长字符串，因为这可能会强制滚动条。还要检查你的 html 和 css 是否有 validation。

【讨论】：

【解决方案2】：

试试：overflow: visible。

【讨论】：

好吧，除了现在我只有一个可见的溢出，它只是没有像它应该的那样“换行”并制作第二行......但只在 Firefox 中...... = /

【解决方案3】：

这个故事一定比你在这里展示的要多。我使用了提供的 CSS，并且在 Internet Explorer 和 Firefox 中都看到了相同的行为。页面呈现 960 像素宽，当浏览器宽度小于此宽度时，会呈现水平滚动条。

如果您在元素上指定宽度，浏览器不会将其呈现小于此值。如果您从示例中删除宽度声明，则元素只会呈现所需的宽度。

如果这不是您要寻找的答案，请提供更多代码以让我们了解全貌。

【讨论】：

【解决方案4】：

将word-wrap: break-word; 添加到您的#content-text

【讨论】：