內嵌塊內容在不同的瀏覽器中顯示不同的結果？

我有這應該是內嵌在一個標題，像這樣一個負責任的表單元素：內嵌塊內容在不同的瀏覽器中顯示不同的結果？

這是在Firefox罰款，因爲這是我要找的。
但是，當我們在Chrome中看到相同的代碼（編輯，在整體葉盤，Yandex的相同的結果，也許所有的WebKit瀏覽器，與MS Edge和IE11一起），這是我得到：

代碼：

h1, 
 
form { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
h1 { 
 
    font-size: 48px; 
 
} 
 
.field { 
 
    display: table-cell; 
 
} 
 
.field, 
 
input { 
 
    width: 100%; 
 
} 
 
input, 
 
.btn { 
 
    padding: 10px 16px; 
 
    box-sizing: border-box; 
 
}

<h1>Inline title</h1> 
 
<form action=""> 
 
    <div class="field"> 
 
    <input type="text" placeholder="Email Address" /> 
 
    </div> 
 
    <div class="field"> 
 
    <button class="btn">Submit</button> 
 
    </div> 
 
</form>

或者，看看the code here (Codepen.io)。
FF和Chrome處理CSS的方式不同嗎？考慮到.field班有display: table-cell;，我覺得Chrome瀏覽器顯示正確的佈局，但我不確定。有沒有一種方法可以實現Firefox在Chrome中顯示的內容，同時不會消除input field的響應特性？

謝謝。

來源

2016-08-24 DriftingSteps

等待 - 爲什麼我的問題投票關閉？ – DriftingSteps

好的，謝謝@Paulie_D。我不知道新的要求。 Stack Snippet已啓動。 – DriftingSteps

你能像這樣[** Codepen **]（https://codepen.io/vivekkupadhyay/pen/rLENKk?editors=0110）爲'form'使用帶有固定'width'的'position'嗎？ – vivekkupadhyay

只需刪除屬性：table-cell並確保一切inline-block：

h1, 
form { 
    display: inline-block; 
    vertical-align: middle; 
} 
h1 { 
    font-size: 48px; 
} 
.field { 
    display: inline-block; /* instead of table-cell > inline-block */ 
} 
input, 
.btn { 
    padding: 10px 16px; 
}

觀看演示在這裏：CODEPEN

來源

2016-08-24 09:38:48 Rotan075

沒有必要使用table-cell只是使用float:left並從field類刪除width類。

h1, 
 
form { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
h1 { 
 
    font-size: 48px; 
 
} 
 
.field { 
 
    float: left;/* Use floating here */ 
 
} 
 
.field, 
 
input { 
 
    /*width: 100%;*/ 
 
} 
 
input, 
 
.btn { 
 
    padding: 10px 16px; 
 
}

<h1>Inline title</h1> 
 
<form action=""> 
 
    <div class="field"> 
 
    <input type="text" placeholder="Email Address" /> 
 
    </div> 
 
    <div class="field"> 
 
    <button class="btn">Submit</button> 
 
    </div> 
 
</form>

來源

2016-08-24 09:34:38

內嵌塊內容在不同的瀏覽器中顯示不同的結果？

回答

相關問題