cari
Rumahhujung hadapan webtutorial cssMasalah elemen bentuk HTML mengatasi elemen gaya dan remedinya_CSS/HTML

在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子。不要小看这个貌似“低级”的问题,即使一些规模较大的网站上类似的问题也绝不鲜见。本文探讨了造成这一问题的根本原因,并提出一种补救办法——之所以说补救办法而不是一劳永逸的解决办法,是因为微软和NetScape这两个巨头也还没有对策。

Masalah elemen bentuk HTML mengatasi elemen gaya dan remedinya_CSS/HTML


  一、HTML元素的显示优先级

  HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT type=text),密码输入框(INPUT type=password),单选输入框(INPUT type=radio),复选输入框(INPUT type=checkbox),等等。常见的非表单元素包括:链接标记(A),DIV标记,SPAN标记,TABLE标记,等等。表单元素覆盖样式元素的根本原因在于HTML元素默认的显示优先级规则,例如:帧元素总是比其他HTML元素优先,因此也总是显示在最前面;表单元素总是比所有非表单元素优先。

  所有这些HTML元素又可以根据其显示要求分成两类,即有窗口的HTML元素(Windowed Element),无窗口的HTML元素(Windowless Element)。有窗口的元素包括:SELECT元素,OBJECT元素,插件,IE 5.01以及更早版本中的IFRAME元素。无窗口的元素包括:大多数的普通HTML元素,如链接和TABLE标记,除了SELECT元素之外的大多数表单元素,NS6+/IE 5.5以及更高版本中的IFRAME元素。本文讨论的问题主要与有窗口的HTML元素有关,问题的症结其实就在于操作系统默认总是把有窗口的元素显示在无窗口的元素前面。

  二、浏览器类型与显示优先级

  按照浏览器类型比较,HTML元素的显示次序也有所不同,总结如下:

  ⑴ Netscape/Mozilla

  在NS浏览器6.0以前的版本中,表单元素总是比其他HTML元素有更高的优先级。但在NS 6+浏览器中,IFRAME元素和所有表单元素的显示次序或者由CSS的z-index属性值确定,或者由它们在HTML页面中出现的次序确定,但SELECT元素除外。

  ⑵ Internet Explorer

  在最新的IE浏览器(6.0)中,IFRAME元素和所有表单元素根据z-index属性值或它们在HTML页面中出现的次序来确定显示优先次序,但SELECT元素除外。

  ⑶ Opera

  在最新的Opera(7.10*)浏览器中,包括SELECT在内的所有表单元素根据z-index属性或它们在HTML页面中的出现次序来确定显示优先级。但是,最新的Opera浏览器不将IFRAME作为无窗口元素显示,IFRAME被看做有窗口元素,在显示次序上要比所有无窗口元素优先。

  三、CSS的z-index属性

  我们知道,CSS的z-index属性可以用来控制任意HTML元素显示时的覆盖次序。当多个HTML元素重叠在同一空间中时,z-index值较大的元素将覆盖z-index值较小的元素。

  但z-index属性值不是万能的。如前所述,有窗口的元素总是显示在无窗口元素的前面,z-index属性值只有在同一类元素之间才起决定作用。形象地说,有窗口元素和无窗口元素就像画在同一浏览器窗口的两块不同画布上,两类元素分别自成体系,它们的z-index属性也只相对于同一画布上的其他元素起作用。

  四、补救之道

  就目前的浏览器而言,一种比较有效的补救办法是:当无窗口元素需要覆盖有窗口元素时,运用脚本程序动态地隐藏有窗口元素。下面是一个完整的例子:











Bahagian


Ringkasnya, sebab unsur bentuk mengatasi elemen gaya terletak pada peraturan keutamaan paparan lalai bagi elemen HTML. Pemulihan yang diperkenalkan dalam artikel ini sememangnya berkesan, tetapi jika anda benar-benar tidak mahu menggunakan kaedah ini, maka anda perlu mempertimbangkan untuk menukar susun atur halaman untuk mengelakkan pertindihan kawasan paparan elemen bentuk dan elemen gaya.
Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Fon Variable Fonts Link Dump!Fon Variable Fonts Link Dump!Apr 16, 2025 am 10:22 AM

Di sana ' s menjadi satu ton barangan hebat yang terbang sekitar fon berubah -ubah akhir -akhir ini (tag kami mempunyai banyak barangan juga). Saya fikir saya ' d melengkapkan semua perkara baru saya

Pautan menggariskan yang menghidupkan ke latar belakang blokPautan menggariskan yang menghidupkan ke latar belakang blokApr 16, 2025 am 10:14 AM

Ia ' s kesan kecil yang sejuk. Gaya pautan lalai mempunyai garis bawah (yang merupakan idea yang baik) dan kemudian pada: hover anda melihat garis bawah pada dasarnya menebal

Halaman preloading sebelum diperlukanHalaman preloading sebelum diperlukanApr 16, 2025 am 09:53 AM

Perjalanan biasa untuk seseorang yang melayari laman web: Lihat halaman, klik pautan, pelayar memuat halaman baru. Itu tidak menganggap perniagaan lucu seperti satu halaman

Susun atur foto penyesuaian dengan FlexboxSusun atur foto penyesuaian dengan FlexboxApr 16, 2025 am 09:51 AM

Mari kita lihat cara yang sangat ringan untuk mencipta kesan batu mendatar untuk satu set gambar bersaiz sewenang-wenangnya. Membuang sebarang set gambar di atasnya, dan

Banyak cara untuk menghubungkan bentuk dan imej dengan HTML dan CSSBanyak cara untuk menghubungkan bentuk dan imej dengan HTML dan CSSApr 16, 2025 am 09:45 AM

Reka bentuk laman web yang berbeza sering memanggil bentuk selain persegi atau segi empat tepat untuk bertindak balas kepada acara klik. Mungkin laman web anda mempunyai semacam condong atau

Sejarah Carian Pemaju WebSejarah Carian Pemaju WebApr 16, 2025 am 09:41 AM

Sophie Koonin blog "Semua yang saya googled dalam seminggu sebagai Jurutera Perisian Profesional," yang merupakan pandangan menarik ke dalam minda pemaju web dan

Coretan untuk melihat semua SVG dalam spriteCoretan untuk melihat semua SVG dalam spriteApr 16, 2025 am 09:31 AM

Saya fikir SVG Sprite seperti ini:

Apa yang berlaku apabila anda membuka pemasangan pelayar baru untuk kali pertama?Apa yang berlaku apabila anda membuka pemasangan pelayar baru untuk kali pertama?Apr 16, 2025 am 09:29 AM

Penyelidikan menarik dari Jonathan Sampson, di mana dia menonton rangkaian meminta penyemak imbas membuat kali pertama anda melancarkannya pada pemasangan segar, dan

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),