☰

使用 CSS 和 IE7 清除浮動？

tag-icon • tag-icon internet-explorer html css internet-explorer-7
使用 CSS 和 IE7 清除浮動？

我花了一天的時間試圖讓浮動和清除在舊版本的 Internet Explorer 中正常運作。我已經閱讀了大量有關使用 .clear:after 技巧等的教程，但我無法讓任何東西真正起作用！

我有這樣的 HTML：

<div id="section">
  <h2>Section Title</h2>

  <label for="name">Name</label>
  <input type="text" id="name" />

  <label for="dob">Date of Birth</label>
  <input type="text" id="dob" />

  <label for="email">Email</label>
  <input type="text" id="email" />
</div>

CSS 像這樣：

#section {border:solid 2px #b7ddf2; background:#ebf4fb; margin-top: 20px;}
#label{clear: left; float: left; width: 300px; margin-left: 20px; margin-bottom: 10px;}
#input{float: left; margin-bottom: 10px;}

在現代瀏覽器中，例如 Opera 25，顯示如下：

Name            [Name field]
Date of birth   [Date of birth field]
Email           [Email]

在舊版的 Internet Explorer（6 或 7）中，它顯示為：

Name            [Name field] [Date of birth field] [Email field]
Date of birth
E-mail

我不想調整我的 HTML，任何人都可以幫我修復 CSS 嗎？

答案1

您嘗試做的事情是一個壞主意，因為首先沒有人應該在新的 Web 應用程式中付出如此多的努力來支援 IE6，其次您的 HTML 結構不靈活，只能在非常特定的情況下工作。

然而，我很好奇是否可以純粹使用 CSS 而無需額外的 HTML 來克服經典的 IE6 浮動錯誤，令人驚訝的是，這似乎確實是可能的。訣竅是使用 IE 的 CSS 表達式將 <br> 元素注入到頁面的文字方塊後面。

當模擬 IE6 和 IE7 時，以下程式碼對我在 IETester 中有效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #section {border:solid 2px #b7ddf2; background:#ebf4fb; margin-top: 20px; display: block; zoom: 1}
            label{clear: left; float: left; width: 300px; margin-left: 20px; margin-bottom: 10px;}
            input{
                float: left;
                margin-bottom: 10px; 
                *zoom: expression(this.runtimeStyle.zoom="1", 
                    this.parentNode.insertBefore(document.createElement("br"), this.nextSibling).style.cssText="clear:both;font:0/0 serif");
            }
        </style>
    </head>
    <body>
        <div id="section">
            <h2>Section Title</h2>

                <label for="name">Name</label>
                <input type="text" id="name" />


                <label for="dob">Date of Birth</label>
                <input type="text" id="dob" />


                <label for="email">Email</label>
                <input type="text" id="email" />

        </div>
    </body>
</html>

根據資訊這一頁

相關內容