Mengapakah Jadual Lebar 100% Saya Tidak Dilanjutkan dengan Baik dalam IE9 Apabila Menggunakan `overflow:hidden` dan Elemen Terapung?-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-12-13 09:26:10

asal

601 orang telah melayarinya

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>

Salin selepas log masuk

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!