IE渲染內聯塊div與FF / Chrome不同

Question

首先，我使用的是IE9，FF 29.0.1和Chrome 35.0.1916.153 m。 我已經做了很多搜索，嘗試使用spans而不是div，使用float而不是inline-block，使用不同的DOCTYPE，添加z順序，確保每個div都有唯一的ID，等等，等等。當如果您在IE中按F12鍵以查看底線，則IE呈現的HTML / CSS不同於FF或Chrome。 這是頁面。 我將其簡化為最低公分母。

http://iamix.net/p/ie-problem.html

問題（如您所見）是按鈕文本按理應出現在FF / Chrome的按鈕下方，但位於IE9中的按鈕上方。 當您查看IE如何呈現頁面時，它將采用第一個button_block div，並使它成為其他三個的准父元素。 FF（使用Firebug）顯示，它按預期呈現HTML / CSS，並且具有四個button_block div兄弟姐妹。

這是IE和FF渲染：

http://iamix.net/p/rendering.html （猜想我需要一個代表才能直接發布圖像...哦，猜猜我需要一個代表來發布兩個以上的鏈接，所以我在這里都放置了兩個圖像）

這里的總體目標是擁有一種可以很好地適應不同屏幕尺寸（包括智能手機）的布局。 原始文件中有一些媒體查詢以調整屏幕尺寸，但是我刪除了一切，但問題仍然存在。 在CSS中加載圖像的原因是因為根據屏幕尺寸使用了不同的圖像尺寸（您會看到媒體查詢是否仍然存在）。 完善的HTML / CSS在PC和Android手機（這是主要目標）上的FF / Chrome中效果很好。 IE是頑固派（一如既往）。 即使我一直在打字，我也嘗試了八種其他方法，因為我真的不希望它成為我忽略了的愚蠢行為。

這是問題仍然存在的地方的我正在處理的基本代碼（來自上面的第一個鏈接）：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .button_bar {
                padding-bottom: 0.5em;
                text-align:center;
            }
            .button_bar button {
                border: none;
                height: 250px;
                width: 270px;
            }
            #first_button {
                background: url(http://iamix.net/p/first-button.png) 0px/250px no-repeat;
                background-position: center center;
            }
            #second_button {
                background: url(http://iamix.net/p/second-button.png) 0px/250px no-repeat;
                background-position: center center;
            }
            #third_button {
                background: url(http://iamix.net/p/third-button.png) 0px/250px no-repeat;
                background-position: center center;
            }
            #fourth_button {
                background: url(http://iamix.net/p/fourth-button.png) 0px/250px no-repeat;
                background-position: center center;
            }
            .button_block {
                display: inline-block;
                padding: 0.5em 0 1em 0;
                vertical-align: top;
            }
            .button_text {
                background: #FFFF80;
                color: black;
                display: inline-block;
                font-weight: bolder;
                text-align: center;
                width: 240px;
                word-wrap: break-all;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="button_bar">
                <div class="button_block">
                    <div>
                        <button id="first_button" type="button" />
                    </div>
                    <div>
                        <span class="button_text">This is the First Button</span>
                    </div>
                </div>
                <div class="button_block">
                    <div>
                        <button id="second_button" type="button" />
                    </div>
                    <div>
                        <span class="button_text">And this is the Second Button</span>
                    </div>
                </div>
                <div class="button_block">
                    <div>
                        <button id="third_button" type="button" />
                    </div>
                    <div>
                        <span class="button_text">Which would make this the Third Button</span>
                    </div>
                </div>
                <div class="button_block">
                    <div>
                        <button id="fourth_button" type="button" />
                    </div>
                    <div>
                        <span class="button_text">And this the Fourth and Final Button</span>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

在HTML中，button不是“自動關閉”標簽，因此，IE實際上實際上在正確執行此操作。 只是將/>附加到標簽上並不會自動將其關閉，就像在XML中一樣。 您需要這樣做：

<button id="fourth_button" type="button"><span>Button Text</span></button>

IE渲染內聯塊div與FF / Chrome不同

問題描述

1 個解決方案

解決方案1
0 已采納 2014-06-13 17:28:52

IE渲染內聯塊div與FF / Chrome不同

問題描述

1 個解決方案

解決方案1 0 已采納 2014-06-13 17:28:52

解決方案1
0 已采納 2014-06-13 17:28:52