輸入框填充配合內部div跨瀏覽器

我有一個div在特定的高度，文本里面的div與輸入框。在safari和chrome中，它非常合適，但在Firefox中，它溢出到div的底部，並且搞亂了結構。輸入框填充配合內部div跨瀏覽器

HTML：

<div class="formLine"> 
    <div style="float:left;">Input Label</div> 
    <input value="" /> 
</div>

CSS：

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

.formLine { 
    border-bottom:1px solid #000; 
    padding:2px; 
    height:18px; 
} 

input { 
    background-color:#E2F4FE; 
    height:14px; 
    outline: 0; 
    border:0; 
    border-radius:3px; 
    line-height:14px; 
    padding-left:3px; 
    float:left; 
}

來源

2013-10-25 bryan

Add overflow：none;這是發生的事情。這應該解決你的問題。 – Phorden

這個問題不僅僅是溢出，而是比其他瀏覽器更深，因此它看起來不太好。頂部有一個巨大的差距（填充？）。 – bryan

火狐實現box-sizing屬性與-moz-前綴（click here for browser support）。將您的通用選擇器更改爲：

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

來源

2013-10-25 14:50:24

我有-moz，我只是添加了一個盒子大小來顯示我擁有它。雖然 – bryan

@bryan我只有其他建議，然後將完全重置您的'input'元素的填充使用'padding：0 3px 0 0;'而不是'padding-left：3px'。 –

我認爲你的意思是'padding：0 0 0 3px;'但那不行。我將不得不寫一個更詳細的例子。 – bryan

輸入框填充配合內部div跨瀏覽器

回答

相關問題