Elenchi di definizione dello stile - IE chiaro: entrambi i bug

Sto provando a definire correttamente un elenco di definizioni. Finora ho lo stile che volevo in Firefox 3.5 e IE 8, ma non riuscivo a far funzionare correttamente IE6 e IE7 ... Ho già provato qualsiasi tipo di trucco e trucco che potrei pensare.Elenchi di definizione dello stile - IE chiaro: entrambi i bug

Sembra che il "clear: both" sul dt non funziona in IE < = 7 ...

riportano di seguito le "pagina di prova" che sto usando. Il markup dell'elenco di definizioni è costruito apposta: voglio testare diversi scenari come definizioni multiple o vuote.

Controllalo in Firefox> 3.5 per vedere come dovrebbe essere.

Saluti !!!

<!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"> 
    <head> 
    <title></title> 
<style type="text/css"> 
    body { font-family: Arial; font-size: 62.5%; } 
    * { margin: 0; padding: 0; } 
    #main { font-size: 1.4em; } 
    dt { font-weight: bold; } 
    hr { clear: both; } 

    dl.aligned { width: 300px; } 
    .aligned dt { clear: both; float: left; margin: 0 0 0.5em 0; width: 100px; } 
    .aligned dd { clear: right; float: right; margin: 0 0 0.5em 10px; width: 190px; } 

</style> 
    </head> 
    <body> 
<div id="main"> 
    <dl class="aligned"> 
    <dt>First title</dt> 
    <dd>1.1 definition</dd> 
    <dd>1.2 definition - very long to test wrapping</dd> 
    <dd>1.3 definition</dd> 
    <dt>Second title</dt> 
    <dd></dd> 
    <dd></dd> 
    <dt>Third title</dt> 
    <dd>3.0 definition</dd> 
    <dt>Fourth title - very long to test wrapping</dt> 
    <dt>Fifth title</dt> 
    <dt>Sixth title</dt> 
    <dd>6.0 definition</dd> 

    </dl> 
</div> 
    </body> 
</html>

fonte

2010-05-07 Andrea

Potrebbe mettere questo in linea per noi, per favore? – Tom

È tutto lì dentro, davvero ... markup e CSS. Tuttavia, esiste uno strumento online che consente di caricare piccoli snippet di codice, che è consigliabile? – Andrea

Quello che stai cercando di fare non è un elenco, è un tavolo. Usa un tavolo. –

Prova ad aggiungere position ai vostri elementi, absolute per la dl e relative per il dt. Potrebbe funzionare ..

fonte

2010-05-07 12:03:02 Kyle

Se il problema che stai riscontrando è che alcuni elementi sembrano "fluttuare verso l'alto", ecco uno spiacevole trucco che puoi provare: metti uno <div> con "chiaro: entrambi" tra la chiusura di un <dd> e il prossimo <dt>. So che sembra stupido e, naturalmente, è un HTML non funzionante, ma è l'unica cosa che ho trovato che mette una "barriera" nel markup per impedire che le cose fluttuino verso l'alto.

fonte

2010-05-07 12:38:51 Pointy

Umh ... Sì, probabilmente funzionerebbe. Comunque sto bene con gli hack e il workaround nel css, ma non voglio rovinare il markup della pagina. :) – Andrea

@Andrea bene, ho detto che era sgradevole. Non sono stato in grado di trovare alcuna alternativa, quindi terrò d'occhio la tua domanda qui! – Pointy

Hai provato la correzione?

io di solito uso questa correzione per tutti i miei progetti in modo ho appena creato un foglio di stile separato solo per esso:

/* float clearing for IE6 */ 
* html .clear { 
    height: 1%; 
    overflow: visible; } 

/* float clearing for IE7 */ 
*+html .clear { 
    min-height: 1%; } 

/* float clearing for everyone else */ 
.clear:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; }

Salva che, come clear.css e includerlo nel markup (o si può semplicemente includerla nel tuo foglio di stile). Quindi, per usare, basta aggiungere una classe chiara al contenitore genitore degli elementi mobili, in questo caso, il tuo dl.

ad es.

<dl class"clear">

fonte

2010-05-12 02:15:39 corroded

Purtroppo il problema qui è diverso ... dt e dd non sono in grado di cancellarli come dovrebbero ... il problema non è sul contenitore dl ma sugli elementi interni ... – Andrea

oh sì, così fa significa che devi davvero rimanere con quel markup? Penso che sia ancora buono (e semantico) markup se si va in modo lista nidificata: dt ha al massimo un dd. se dt ha molte definizioni, usa una lista non ordinata per elencarle tutte. – corroded

Questo dovrebbe funzionare, ho aggiunto alcuni colori di sfondo in modo da poter vedere cosa sta succedendo. Dovrai aggiungere una lezione ad ogni primo dd e giocare con le varie "larghezze" per adattarle al tuo design.

<style type="text/css"> 
    body { font-family: Arial; font-size: 62.5%; } 
    * { margin: 0; padding: 0; } 
    #main { font-size: 1.4em; } 
    dt { font-weight: bold; } 
    hr { clear: both; } 

    dl.aligned { background-color:orange;width: 400px; } 
    .aligned dt {background-color:grey;clear:both;float: left; margin: 0 0 0.5em 0; width:150px} 
    .aligned dd {background-color:olive;clear:left;float: left; margin: 0 0 0.5em 150px; width: 190px; } 
.aligned dd.first {clear: none;margin-left:0} 

</style> 
    </head> 
    <body> 
<div id="main"> 
    <dl class="aligned"> 
    <dt>First title</dt> 
    <dd class="first">1.1 definition</dd> 
    <dd>1.2 definition - very long to test wrapping</dd> 
    <dd>1.3 definition</dd> 
    <dt>Second title</dt> 
    <dd></dd> 
    <dd></dd> 
    <dt>Third title</dt> 
    <dd class="first">3.0 definition</dd> 
    <dt>Fourth title - very long to test wrapping</dt> 
    <dt>Fifth title</dt> 
    <dt>Sixth title</dt> 
    <dd class="first">6.0 definition</dd> 

    </dl> 
</div> 
    </body>

fonte

2010-07-26 12:21:07 lupalz

Penso che la soluzione migliore qui riguarda la modifica della struttura HTML. Se crei diversi blocchi dl.aligned - invece di uno solo - è abbastanza semplice ottenere ciò che desideri.

<dl> 
<dt></dt> 
<dd></dd> 
<dd></dd> 
</dl> 

<dl> 
<dt></dt> 
<dd></dd> 
<dd></dd> 
</dl> 

<dl> 
<dt></dt> 
<dd></dd> 
</dl>

fonte

2010-11-09 11:23:55 bluantinoo

Questo funziona in IE7, non testato in IE6. Regolare secondo necessità. Adapted from here.

<!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"> 
    <head> 
    <title></title> 
<style type="text/css"> 
    body { font-family: Arial; font-size: 62.5%; } 
    * { margin: 0; padding: 0; } 
    #main { font-size: 1.4em; } 
    dt { font-weight: bold; } 
    hr { clear: both; } 

    dl.aligned { width: 300px; } 
    .aligned dt { clear: both; float: left; margin: 0 0 0.5em 0; width: 100px; } 
    .aligned dd { clear: right; float: right; margin: 0 0 0.5em 10px; width: 190px; } 

</style> 

<!--[if lt IE 8]> 

    <style type="text/css"> 
    .aligned dt { float: left; clear: left; margin: 0 0 0.5em 0; width: 100px; } 
    .aligned dd { clear: none; float: none; margin: 0 0 0 100px; width: 190px; } 
    .aligned dt:after { content: ":"; } 
    </style> 

<![endif]--> 

    </head> 
    <body> 
<div id="main"> 
    <dl class="aligned"> 
    <dt>First title</dt> 
    <dd>1.1 definition</dd> 
    <dd>1.2 definition - very long to test wrapping</dd> 
    <dd>1.3 definition</dd> 
    <dt>Second title</dt> 
    <dd></dd> 
    <dd></dd> 
    <dt>Third title</dt> 
    <dd>3.0 definition</dd> 
    <dt>Fourth title - very long to test wrapping</dt> 
    <dt>Fifth title</dt> 
    <dt>Sixth title</dt> 
    <dd>6.0 definition</dd> 

    </dl> 
</div> 
    </body> 
</html>

fonte

2010-11-13 00:09:29 juddlyon

Per coloro che sono venuti in questo alla ricerca di una soluzione, ho qualcosa che funziona per i singoli <dt>/<dd> coppie (presumendo che la larghezza dei due elementi si aggiunge fino alla larghezza della <dl>.

Utilizzare il css menzionato sopra per tutti i brower ma IE7.Per IE7, usare qualcosa come il seguente:

.ie7 #home .news dt, 
.ie7 #home .news dd { 
    float: none; 
    display: inline; 
    zoom: 1; 
    vertical-align: top; 
}

Nota: sto usando i commenti condizionali per indirizzare IE7 in questo modo. Usa qualsiasi metodo di targeting IE7 preferito per inviarti queste regole. Sono consapevole del fatto che questo cade a pezzi in modo orribile se si aggiungono più elementi <dd>, motivo per cui ho notato che funziona solo per coppie di elementi. *

fonte

2011-06-27 06:38:32 pnomolos

Direi che l'intero codice è rotto. Come ha detto @NickPyett nel commento, dovrebbe essere formattato come tabella.

Nessun hack richiesto e tutto viene visualizzato come desiderato.

th { 
 
    text-align: left; 
 
}

<table> 
 
    <tr> 
 
    <th scope="rowgroup" rowspan="3">First title</th> 
 
    <td>1.1 definition</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1.2 definition - very long to test wrapping</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1.3 definition</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Second title</th> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Third title</th> 
 
    <td>3.0 definition</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Fourth title - very long to test wrapping</th> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Fifth title</th> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <th scope="row">Sixth title</th> 
 
    <td>6.0 definition</td> 
 
    </tr> 
 
</table>

fonte

2016-05-18 07:45:25 tomasz86

Elenchi di definizione dello stile - IE chiaro: entrambi i bug

risposta

Problemi correlati