Beim Entwerfen von HTML-Seiten stoßen wir häufig auf Probleme, die durch Formularelemente verursacht werden, die Stilelemente verdecken. Abbildung 1 ist ein typisches Beispiel. Unterschätzen Sie dieses scheinbar „niedrige“ Problem nicht. Ähnliche Probleme sind selbst auf einigen größeren Websites keine Seltenheit. Dieser Artikel untersucht die Grundursache dieses Problems und schlägt eine Lösung vor. Der Grund, warum ich eher von einer Lösung als von einer dauerhaften Lösung spreche, liegt darin, dass die beiden Giganten Microsoft und NetScape noch keine Gegenmaßnahmen haben.
1. Anzeigepriorität von HTML-Elementen
Zu den häufig verwendeten Formularelementen in HTML gehören: Textbereich (TEXTAREA), Listenfeld (SELECT), Texteingabefeld (INPUT-Typ=Text), Passwort-Eingabefeld (INPUT-Typ=Passwort), Radio-Eingabefeld (INPUT-Typ=Radio). Eingabefeld prüfen (INPUT-Typ=Kontrollkästchen) usw. Zu den üblichen Nicht-Formular-Elementen gehören: Link-Tag (A), DIV-Tag, SPAN-Tag, TABLE-Tag usw. Der grundlegende Grund, warum Formularelemente Stilelemente überschreiben, liegt in den standardmäßigen Anzeigeprioritätsregeln von HTML-Elementen. Beispielsweise haben Rahmenelemente immer Vorrang vor anderen HTML-Elementen und werden daher immer im Vordergrund angezeigt. Formelemente.
Alle diese HTML-Elemente können entsprechend ihren Anzeigeanforderungen in zwei Kategorien unterteilt werden, nämlich Fensterelemente und Fensterlose Elemente. Zu den Fensterelementen gehören: SELECT-Elemente, OBJECT-Elemente, Plug-Ins und IFRAME-Elemente in IE 5.01 und früheren Versionen. Zu den fensterlosen Elementen gehören: die meisten gewöhnlichen HTML-Elemente wie Links und TABLE-Tags, die meisten Formularelemente außer SELECT-Elementen und IFRAME-Elemente in NS6+/IE 5.5 und höher. Die in diesem Artikel behandelten Probleme beziehen sich hauptsächlich auf HTML-Elemente mit Fenstern. Der Kern des Problems besteht darin, dass das Betriebssystem standardmäßig Fensterelemente immer vor fensterlosen Elementen anzeigt.
2. Browsertyp und Anzeigepriorität
Je nach Browsertyp unterscheidet sich auch die Anzeigereihenfolge von HTML-Elementen, die sich wie folgt zusammenfassen lässt:
⑴Netscape/Mozilla
In Versionen vor NS Browser 6.0 hatten Formularelemente immer eine höhere Priorität als andere HTML-Elemente. Aber im NS 6+-Browser wird die Anzeigereihenfolge von IFRAME-Elementen und allen Formularelementen entweder durch den Wert des z-index-Attributs von CSS oder durch die Reihenfolge bestimmt, in der sie auf der HTML-Seite erscheinen, mit Ausnahme von SELECT Element.
⑵Internet Explorer
Im neuesten IE-Browser (6.0) bestimmen das IFRAME-Element und alle Formularelemente die Anzeigepriorität basierend auf dem Z-Index-Attributwert oder der Reihenfolge, in der sie auf der HTML-Seite erscheinen, mit Ausnahme des SELECT-Elements.
⑶ Oper
In den neuesten Opera-Browsern (7.10*) werden alle Formularelemente, einschließlich SELECT, für die Anzeige basierend auf dem Z-Index-Attribut oder der Reihenfolge, in der sie auf der HTML-Seite erscheinen, priorisiert. Der neueste Opera-Browser zeigt IFRAME jedoch nicht als fensterloses Element an. IFRAME wird als Fensterelement betrachtet und hat in der Anzeigereihenfolge Vorrang vor allen fensterlosen Elementen.
3. CSS-Z-Index-Attribut
Wir wissen, dass das Z-Index-Attribut von CSS verwendet werden kann, um die Überlagerungsreihenfolge jedes HTML-Elements bei der Anzeige zu steuern. Wenn sich mehrere HTML-Elemente im selben Bereich überlappen, überschreibt das Element mit einem größeren Z-Indexwert das Element mit einem kleineren Z-Indexwert.
Der Wert des Z-Index-Attributs ist jedoch nicht allmächtig. Wie bereits erwähnt, werden Fensterelemente immer vor fensterlosen Elementen angezeigt und der Z-Index-Attributwert spielt nur zwischen Elementen desselben Typs eine entscheidende Rolle. Im übertragenen Sinne sind Fensterelemente und fensterlose Elemente wie das Zeichnen auf zwei verschiedenen Leinwänden im selben Browserfenster. Die beiden Elementtypen sind in sich geschlossen und ihre Z-Index-Attribute beziehen sich nur auf andere Elemente auf derselben Leinwand. eintreten.
4. Abhilfe
Was aktuelle Browser betrifft, ist eine wirksamere Lösung: Wenn ein fensterloses Element mit einem Fensterelement abgedeckt werden muss, verwenden Sie ein Skript, um das Fensterelement dynamisch auszublenden. Hier ist ein vollständiges Beispiel:
<html><head>
<style type=text/css>
.menuBlock{position:relative;top:14px;width:165px;border:2px einfarbig schwarz;}
#subMenus{position:relative;left:15px;top:15px;width:171px;
padding-left:2px;padding-right:2px;border:2px einfarbig schwarz;
z-index:100;visibility:hidden;}
#lb_1{position:absolute;left:10px;top:40px }
</style>
<script type=text/javascript>
var isActive = false;
Funktion showMenu(){
isActive = true;
//document.getElementById(lb_1).style.visibility=hidden;
document.getElementById(subMenus).style.visibility=visible;
}
Funktion hideMenu(){
isActive = false;
setTimeout('hide()',100);
}
Funktion hide(){
if(!isActive){
document.getElementById(subMenus).style.visibility = versteckt;
document.getElementById(lb_1).style.visibility=visible;
}
}
Funktion setStyle(menuItem){
isActive = true;
menuItem.style.backgroundColor = Grau;
menuItem.style.color = #FFFFFF
}
Funktion setDefault(menuItem){
isActive = false;
menuItem.style.backgroundColor = ;
menuItem.style.color =
hideMenu();
}
</script></head><body>
<div id=main style=position:absolute;width:200px;>
<div id=menuBlock class=menuBlock onmouseover=showMenu();
onmouseout=hideMenu();>CSS-Menü</div>
<div id=subMenus>
<div id=0 onmouseover=setStyle(this)
onmouseout=setDefault(this) >Menüpunkt eins</div>
<!--Insgesamt vier Menüpunkte-->
</div><P>
<select id=lb_1 name=lb_1>
<option value=-1/>Liste auswählen
<!--Drei Optionen-->
</select>
</div>
</body></html>
Der <STYLE>-Teil der Seite definiert drei Stile, die für Menüleisten, Menüelemente und Auswahllisten verwendet werden. Die Stildefinition stellt sicher, dass sich die Anzeigebereiche von Menüs und Auswahllisten überschneiden. Der Abschnitt <BODY> enthält Definitionen für Menüs und <SELECT>-Auswahllisten. Wenn die Maus über die Menüleiste fährt, wird die JavaScript-Funktion showMenu ausgeführt, um das Menü anzuzeigen und die SELECT-Auswahlliste auszublenden. Nach dem Verlassen der Maus blendet die Funktion hideMnu das Menü aus und stellt die Auswahlliste wieder her. Die restlichen JavaScript-Funktionen werden hauptsächlich zur Simulation von Menüaktionen verwendet. Wenn die Maus über einen Menüpunkt fährt, wird das Menü mit hoher Helligkeit angezeigt (setStyle-Funktion), und wenn die Maus den Menüpunkt verlässt, wird der Standardanzeigemodus wiederhergestellt (setDefault-Funktion). Der Laufeffekt der Seite ist in Abbildung 2 dargestellt. Kommentieren Sie die Anweisung „document.getElementById(lb_1).style.visibility=hidden“ in der Funktion „showMenu“ aus, um den Effekt in Abbildung 1 zu sehen.
<Beschreibung>
<img src=http://www.chinahtml.com/cce/img/553/04601t02.jpg>
</descript>
Kurz gesagt, die Ursache dafür, dass Formularelemente Stilelemente überschreiben, liegt in den standardmäßigen Anzeigeprioritätsregeln von HTML-Elementen. Die in diesem Artikel vorgestellten Abhilfemaßnahmen sind zwar wirksam, aber wenn Sie diese Methode wirklich nicht verwenden möchten, müssen Sie über eine Änderung des Seitenlayouts nachdenken, um eine Überlappung des Anzeigebereichs von Formularelementen und Stilelementen zu vermeiden.