Galleggiante troppo a destra
-
06-07-2019 - |
Domanda
Ho un'applicazione web per la gestione dei record che mostra un record master su uno schermo e gli editor AJAX incorporati dinamicamente in un div editor, che ho usato JQuery per rendere trascinabile. Funziona.
Anche se il div non è una finestra, ho pensato che potrebbe essere una buona idea farlo agire un po 'più come uno, quindi ho scritto un codice in " chiudi " pulsante. La struttura è simile alla seguente:
<div id="editor">
<div id="draghandle" />
<div id="closebutton" />
<div id="editorbody" />
</div>
Editorbody ha dimensioni variabili a seconda di ciò che le persone stanno cercando di inserire.
La larghezza del draghandle è impostata al 100% dell'editor. Closebutton è impostato in CSS come float: right
.
Il mio problema è che, in IE6 e IE7, il pulsante di chiusura galleggia troppo a destra. È sempre contro il bordo destro della finestra, indipendentemente da dove trascino il div editor in giro. In Firefox e Safari sembra che me lo aspettassi: la finestra è larga come l'editor e il pulsante di chiusura si trova nell'angolo in alto a destra.
Non sono particolarmente legato al float: giusto, sto solo cercando un modo per impostare il CSS che mi dia lo stesso risultato su tutti i browser. Qualche idea?
" Screenshots "
Ecco un modello di ciò che mi piacerebbe fare su jsbin (grazie, redsquare)
Sto lavorando con informazioni legalmente sensibili, quindi non posso fornire schermate dell'app. Tuttavia, ho scattato alcuni scatti e bloccato il testo e l'interfaccia, lasciando solo la struttura della finestra.
Soluzione
Potresti prendere in considerazione la possibilità di utilizzare un JQuery Dialog invece dalla sua versione precedente e dagli stili funziona già multipiattaforma.
Altri suggerimenti
Per la cronaca, ciò che ha funzionato per risolvere questo problema è stato cambiare il CSS per closebutton da
float: right;
a
position: absolute;
right: 5px;
text-align: right;
Questo produce risultati corretti in IE e con un po 'di riempimento per i campi del modulo interno non ci si deve preoccupare della sovrapposizione.
Gli hack CSS sono necessari a volte:
* + html #editor #closebutton /* IE7 */, * html #editor #closebutton /* IE6 */ {margin-right: 100px;} // insert whatever value that fits here
per gli hack css specifici di IE puoi fare qualcosa del tipo:
#divId {
margin-right: 0; /*Normal styles for all browsers*/
*margin-right: 100px; /*The asterisk allows only for IE6 AND IE7 to read this*/
_margin-right: 90px; /*The underscore allows only IE6 to read this style*/
}
Assicurati solo che gli hack di asterisco e di sottolineatura siano posizionati secondo il normale (valido) stile css.