Rumah >hujung hadapan web >tutorial css >Mengapakah Jadual Lebar 100% Saya Tidak Dilanjutkan dengan Baik dalam IE9 Apabila Menggunakan `overflow:hidden` dan Elemen Terapung?

Mengapakah Jadual Lebar 100% Saya Tidak Dilanjutkan dengan Baik dalam IE9 Apabila Menggunakan `overflow:hidden` dan Elemen Terapung?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-13 09:26:10593semak imbas

Why Do My 100% Width Tables Not Extend Properly in IE9 When Using `overflow:hidden` and Floated Elements?

Isu Terapung IE9: Limpahan:Tersembunyi dan Lebar Jadual 100%

Dalam reka letak web, anda menghadapi masalah pelik apabila jadual dengan 100 % lebar gagal dilanjutkan dengan betul bersama bekas terapung di sebelah kanan. Isu ini muncul secara eksklusif dalam Internet Explorer 9. Untuk membetulkannya, adalah penting untuk memastikan pengepala halaman anda dikonfigurasikan dengan betul.

Penyelesaian untuk overflow:hidden dalam Internet Explorer melibatkan penambahan pengepala berikut:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
  .container{margin:0 auto; min-width:1000px; max-width:1200px;}
  .sidebar{float:right;width:300px;margin-left:5px;}
  .tholder{overflow:hidden;}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<img src="dsfd.jpg" height="600" width="295">
</div>
<div class="tholder">
<table width="100%" border="1"><tr><td>Text</td></tr></table>
</div>
<div class="tholder">
<table width="100%" border="1"><tr><td>Test goes here</td></tr></table>
</div>
<div class="tholder">
<table width="100%" border="1"><tr><td>text</td></tr></table>
</div>
</div>
</body>
</html>

Dengan melaksanakan pengepala ini, anda boleh memastikan reka letak anda berkelakuan secara konsisten dalam Internet Explorer 9, memaparkan meja memanjang dengan betul di samping bekas terapung.

Atas ialah kandungan terperinci Mengapakah Jadual Lebar 100% Saya Tidak Dilanjutkan dengan Baik dalam IE9 Apabila Menggunakan `overflow:hidden` dan Elemen Terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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