Komentar Halaman Web menghasilkan overflow teks di IE

Penulis：Eve Cole Waktu Pembaruan：2025-06-12 01:16:01

Kode eksperimental adalah sebagai berikut:

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <title> satu lagi babi </iteme> </head> <body> <div style = lebar: 400px> <div style = float: left> </div> <!--> <div style = float: kanan; lebar: 400px> ↓ ini adalah babi ekstra </div> </div> </body> htl> htl ini adalah babi ekstra </div> </div> </body> htl

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankan 1. Tes di IE dan FF, dan hanya teks overflow yang terjadi di IE.

Catatan: Teks overflow yang disebabkan oleh komentar adalah bug IE.

2. Lepaskan float: kiri; Dalam <div style = float: left> </div>, dan Anda akan menemukan bahwa kata tambahan "babi" hilang dan halaman ditampilkan secara normal.

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <title> satu babi </itement> </head> <body> <div style = lebar: 400px> <v div> </div> <!--> <div style = float: kanan; lebar: 400px> ↓ ini adalah babi ekstra </div> </div> </body> </html>

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankan float yang sama: kanan; Dalam <div style = float: kanan; lebar: 400px>. Kata Babi Ekstra juga menghilang dan halaman ditampilkan secara normal.

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <title> satu lagi babi </itement> </head> <body> <div style = lebar: 400px> <div style = float: left> </div> <!--> <div style = width: 400px> ↓ ini adalah babi tambahan </div> </div> </body> </html>

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankan instruksi: Teks overflow yang disebabkan oleh komentar terkait dengan blok mengambang.

3. Transfer komentar ke depan <div style = float: left> </div>, kata kelebihan babi menghilang dan halaman ditampilkan secara normal.

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <itement> satu babi </itement> </head> <body> <div style = lebar: 400px> <!--> <div style = float: left> </div> <div style = float: right; width: 400px> ini adalah babi ekstra </div> </div> </body> </html

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankan dan mentransfer komentar ke <div style = float: kanan; lebar: 400px> ↓ Ini adalah babi ekstra </div>. Kata Babi Ekstra juga menghilang dan halaman ditampilkan secara normal.

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <title> satu babi </iteme> </head> <body> <div style = lebar: 400px> <div style = float: left> </div> <div style = float: kanan; lebar: 400px> ↓ ini adalah babi tambahan </div> <!--</div> </body> </htm

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankan instruksi: Teks overflow yang disebabkan oleh komentar terkait dengan lokasinya. (Ini dapat dipahami bersama dengan titik 2)

4. Lepaskan lebar: 400px di <div style = float: right; width: 400px>, kata kelebihan babi menghilang, dan halaman ditampilkan secara normal.

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <title> satu lagi babi </iteme> </head> <body> <div style = lebar: 400px> <div style = float: left> </div> <!--> <div style = float: right;> ini adalah babi tambahan </div> </div> </body> </html>

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankan instruksi: overflow teks yang disebabkan oleh komentar terkait dengan lebar tetap dari blok teks (apakah itu nilai absolut atau nilai relatif).

5. Tingkatkan jumlah komentar: Ketika 1 komentar, 1 kata akan muncul; Ketika 2 komentar, 3 kata akan muncul; Saat 3 komentar, 5 kata akan muncul ...

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankannya

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <title> satu lagi babi </itement> </head> <body> <div style = lebar: 400px> <div style = float: left> </div>  <div style = float: right; width: 400px> ↓ ini adalah ekstra pig </div> </div> </div>

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankannya

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset=gb2312 /><title>One more pig</title></head><body><div style=width:400px><div style=float:left></div><div style=float:right;width:400px>↓This is the extra pig</div></div></body></html>

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankannya

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <itement> satu lagi babi </itement> </head> <body> <div style = lebar: 400px> <div style = float: left> </div>   <v style = float; right; width: 400px> Maset

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankannya. Kami akan mendapatkan formula dari aturan di atas: Jumlah kata yang meluap teks = jumlah komentar * 2-1. Jumlah kata di sini benar ketika ada nomor Cina atau Inggris.

Ketika jumlah kata teks yang meluap lebih besar dari jumlah kata teks, blok teks akan hilang.

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <title> satu lagi babi </itement> </head> <body> <div style = lebar: 400px> <div style = float: left> </div>   <!-  <!-  <!-  <!-  <!- <!->   <! Babi Ekstra </div> </div> </body> </html>

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankan instruksi: Jumlah kata yang meluap terkait dengan jumlah komentar.

Dari tes 1 dan 2, jangan beri komentar di antara 2 blok mengambang.

Larutan:

1. Tidak ada komentar yang ditempatkan. Solusi termudah dan tercepat, hehe ...

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <itement> satu babi </iteme> </head> <body> <div style = lebar: 400px> <div style = float: left> </div> <div style = float: right; width: 400px> ↓ ini adalah babi ekstra </div> </div> </body> </html>

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankan 2. Jangan menempatkan komentar di antara 2 blok mengambang.

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <itement> satu babi </itement> </head> <body> <div style = lebar: 400px> <!--> <div style = float: left> </div> <div style = float: right; width: 400px> ini adalah babi ekstra </div> </div> </body> </html

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankan 3. Sertakan blok teks antara </Div> yang baru, seperti: <div style = float: kanan; lebar: 400px> <div> ↓ Ini adalah babi ekstra </div> </div>.

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <title> satu lagi babi </iteme> </head> <body> <div style = lebar: 400px> <div style = float: left> </div> <!--> <div style = float: right; width: 400px> <Div> Ini adalah ekstra pig </div> </Div> </Div> </hgt/HAL/HAL/HITL </Div> </Div> </Div>

Tip: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankan 4. Lepaskan lebar tetap dari blok teks, yang memiliki kesamaan dengan 3.

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = gb2312/> <title> satu lagi babi </iteme> </head> <body> <div style = lebar: 400px> <div style = float: left> </div> <!--> <div style = float: right;> ini adalah babi tambahan </div> </div> </body> </html>

Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankan analisis dan solusi di atas yang mungkin tidak memadai atau tidak akurat. Selamat datang untuk mendiskusikan dan mengoreksi saya.