Problema Firefox con overflow CSS

Question

Sto cercando di scrivere un CSS in cui quando l'utente scrive del testo e trabocca invece di avere una barra di scorrimento o nascondersi, va giù come in un normale documento di Word o giù di lì. Ho questo codice:

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

La cosa strana è che mentre questo codice fa effettivamente quello che voglio in IE in Firefox, trabocca e diventa una barra di scorrimento. Ho provato overflow: auto; overflow: hidden; e overflow: ereditare; solo per vedere se qualcuno mi ha aiutato, ma senza fortuna finora, e onestamente non ho idea del perché questo accada in Firefox, = / qualcuno di voi lo saprebbe?

---

Aggiornamento: Ho provato con overflow: visibile; ma ho solo l'overflow ... ben visibile ma ancora non si avvolge. e SOLO su Firefox finora. = /

---

Aggiornamento: L'unica altra cosa che potrebbe influenzare è che ho un altro codice CSS e il primo è contenuto:

#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;
}

e l'HTML che lo utilizza è:

<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>

Answer 1

Quindi il tuo CSS probabilmente sta bene. Ad esempio sulla mia pagina ho css è così:

 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;
    }

Quindi nel corpo lo chiamo così:

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

Funziona bene. Ma assicurati che quando lo collaudi lo provi con qualcosa come Lorem Ipsum, parole con spazi e non una lunga stringa come 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' perché probabilmente forzerà una barra di scorrimento. Controlla anche il tuo html e css per validation .

Answer 2

Prova: overflow: visible .

Answer 3

Ci deve essere più nella storia di quello che stai mostrando qui. Ho usato il CSS fornito e sto riscontrando lo stesso comportamento in Internet Explorer e Firefox. La pagina ha una larghezza di 960 pixel e quando la larghezza del browser è inferiore a questa, viene visualizzata una barra di scorrimento orizzontale.

Se si specifica una larghezza su un elemento, il browser non lo renderà inferiore a questo valore. Se rimuovi la dichiarazione di larghezza dal tuo esempio, l'elemento verrà visualizzato solo nella misura necessaria.

Se questa non è la risposta che stai cercando, ti preghiamo di fornire più codice per fornirci l'intero quadro.

Answer 4

Aggiungi word-wrap: break-word; al tuo #content-text