CSSオーバーフローFirefoxの問題

StackOverflow https://stackoverflow.com/questions/415065

  •  03-07-2019
  •  | 
  •  

質問

ユーザーがテキストを書き込んで、スクロールバーや非表示の代わりにオーバーフローすると、通常のWord文書などのようにちょうど下がってしまうCSSを記述しようとしています。私はこのコードを持っています：

#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で私が望むことを実際に行う一方で、オーバーフローしてスクロールバーになります。 overflow：autoを試しました。オーバーフロー：非表示;そして、overflow：inherit;助けてくれたが、これまで運がなかったかどうかを確認するために、そして、これがFirefoxでなぜ起こっているのか正直にわかりません、//あなたは知っていますか？

更新： overflow：visibleで試しました。しかし、私はオーバーフローを取得します...よく見えますが、それでもラップしません。これまでのところ、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>
役に立ちましたか？

解決

だからあなたの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のようなもの、「aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa」のような長い文字列ではなくスペースを含む単語でテストすることを確認してください。また、HTMLとCSSで検証を確認します。

他のヒント

試してください： overflow：visible 。

ここで示している以上のストーリーがあるはずです。提供されているCSSを使用しましたが、Internet ExplorerとFirefoxの両方で同じ動作が見られます。ページは幅960ピクセルでレンダリングされ、ブラウザーの幅がこれよりも小さい場合、水平スクロールバーがレンダリングされます。

要素の幅を指定した場合、ブラウザはこの値よりも小さい幅をレンダリングしません。例から幅の宣言を削除すると、要素は必要な幅だけレンダリングされます。

これが探している答えではない場合は、全体像を示すためにコードを追加してください。

word-wrap：break-word; を＃content-text

に追加します
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top