January 22
Quando si progetta un sito web semplice, Hypertext Markup Language o HTML e fogli di stile CSS, noto anche come CSS, sono utilizzati per creare un layout. La combinazione di questi due elementi crea scatole, che il World Wide Web Consortium chiama il box model. Mentre il modello di dialogo funziona bene nella maggior parte dei browser, Internet Explorer, o IE, ha alcuni problemi. Durante la progettazione di un sito web con CSS si potrebbe incorrere in alcuni capricci in IE. Ci sono diverse soluzioni per evitare questi strani problemi.
1 Aggiungere "word-wrap: break-word;" ad ogni div. Quando si dispone di una riga di testo che è troppo lungo per il vostro div, si è rotto automaticamente in diverse linee dalla maggior parte dei browser. Tuttavia, IE non si rompe il testo in modo automatico, causando il div di allungare. Il comando word-wrap costringerà IE per rompere la parola per voi, mettendo in diverse linee e mantenere il div la larghezza desiderata. In azione, il CSS appare in questo modo:
<Style>
scatola{
background-color: #000;
width: 500px;
word-wrap: break-word;
}
</ Style>
2 Aggiungere il seguente DOCTYPE alla pagina:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Inserire questo codice nella parte superiore del documento HTML, prima del tag <html>. Regola l'imbottitura per la pagina generale nei browser precedenti a IE 8. Senza di essa, la dimensione dei div non sarà esattamente come li si imposta, che può buttare fuori le scatole.
3 Aggiungere il codice CSS "overflow: hidden;" a ciascuno dei vostri box div. Questo codice funziona molto simile alla "word-wrap: break-word;" codice, solo questo funziona per immagini così. Questo codice non è l'ideale, come da disegno sarà ritagliare testo e le immagini che sono più largo vostro box, tuttavia mantiene queste immagini canaglia e lunghe righe di testo da rompere il layout. Quando si implementa questo codice, il CSS sarà simile a questo:
<Style>
scatola{
background-color: #000;
width: 500px;
overflow: hidden;
}
</ Style>