分析由瀏覽器對input框默認寬度的不同所導致的問題

最近后端同事讓我幫他修改樣式的兼容性，chrome與firefox下顯示的不同（只兼容這兩個瀏覽器），究其原因，應該是兩個瀏覽器在input(不說類型的話，默認為text，下同)默認寬度不一致導致的。

• 先看效果

  • chrome下的顯示(區塊寬度為1673px)

    

    chrome父元素.png

  • firefox下的顯示(區塊寬度為978px)

    

    火狐父元素.png

• 父元素設置display:inline-block后，其寬度由內容（子元素）決定；子元素設置百分比 ，寬度由父元素確定，這樣就導致了父元素的寬度由子元素決定，而子元素的寬度由父元素決定，說的簡單點

  • 父元素（inline-block）的寬度 <= 子元素寬度
  • 子元素的寬度設置為百分比 <= 父元素的寬度

  • 通過在瀏覽器測試，先不設置子元素寬度百分比的情況

    • 代碼

      <div style="display: inline-block;border: 1px solid red;"> <input type="text"> </div>
    • chrome展示效果
      

      chrome下未定義子元素寬度的展示.png

    • 子元素input的寬度

?????

chrome下未定義子元素寬度.png

• 父元素div的寬度

chrome下父元素寬度.png

• 設置子元素寬度百分比

先看代碼

<div style="display: inline-block;border: 1px solid red;"> <input type="text" style="width: 50%;background: black"> </div>

chrome的展示效果

chrome下的展示效果.png

• 子元素input的寬度

chrome下子元素的寬度.png

• 父元素div的寬度

chrome下設置子元素寬度百分比的父元素寬度.png

• 由此可見，無論子元素是否設置寬度百分比，都不影響父元素的寬度。

• 根據子元素無論是否設置寬度百分比而不影響父元素的寬度（inline-block，寬度由內容決定），可以得出如下結論：

  • 先計算父元素的寬度，不考慮子元素寬度的百分比，這樣父元素的寬度就通過子元素給撐開了；由于不同瀏覽器默認的Input框的寬度不一樣，就導致了父元素的寬度不一樣
  • 然后再根據父元素的寬度來及其子元素的百分比來設置子元素的寬度。

• 分析問題來源的原因

  • 其父元素設置了display:inline-block，寬度由內容決定
    • 內容中，由于input框沒有定義寬度，所以顯示其默認的寬度（在火狐與谷歌中是不一致的）=> 父元素的寬度不一致
  • 子元素設置了寬度百分比，由其父元素的寬度決定 => 子元素的寬度不一致

• 各個瀏覽器下對input框的默認寬度

  • 谷歌

    

    chrome下input的默認寬度.png

  • 火狐

    

    firefox下input默認寬度.png

  • IE

    

    IE10下input的默認寬度.png

• 解決方案

  • 重置input框的寬度為數值，不要用瀏覽器默認的寬度，否則可能會導致在各個瀏覽器的表現不一致

  • 重置input的寬度為百分比，而其父元素的寬度由內容決定（比如display:inline-block），就會出現本例中的情況，此時可以定義父元素的寬度，不讓其寬度由內容決定

來自：http://www.jianshu.com/p/0e01d96a3a58