來源：最近后端同事讓我?guī)退薷臉邮降募嫒菪?，chrome與firefox下顯示的不同（只兼容這兩個(gè)瀏覽器），究其原因，應(yīng)該是兩個(gè)瀏覽器在input(不說類型的話，默認(rèn)為text，下同)默認(rèn)寬度不一致導(dǎo)致的。

• 先看效果

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

    
    
    chrome父元素.png

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

    
    
    火狐父元素.png
• 父元素設(shè)置display:inline-block后，其寬度由內(nèi)容（子元素）決定；子元素設(shè)置百分比 ，寬度由父元素確定，這樣就導(dǎo)致了父元素的寬度由子元素決定，而子元素的寬度由父元素決定，說的簡單點(diǎn)
  • 父元素（inline-block）的寬度 <= 子元素寬度
  • 子元素的寬度設(shè)置為百分比 <= 父元素的寬度
  • 通過在瀏覽器測試，先不設(shè)置子元素寬度百分比的情況
    • 代碼

         <input type="text">
    </div>```
    
    * chrome展示效果
    

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

* 子元素input的寬度

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

* 父元素div的寬度

chrome下父元素寬度.png

• 設(shè)置子元素寬度百分比
  • 先看代碼

     <input type="text" style="width: 50%;background: black">
  </div>```
  * chrome的展示效果
  

chrome下的展示效果.png

* 子元素input的寬度

chrome下子元素的寬度.png

* 父元素div的寬度

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

• 根據(jù)子元素?zé)o論是否設(shè)置寬度百分比而不影響父元素的寬度（inline-block，寬度由內(nèi)容決定），可以得出如下結(jié)論：

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

• 分析問題來源的原因

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

• 各個(gè)瀏覽器下對input框的默認(rèn)寬度

  • 谷歌

    
    
    chrome下input的默認(rèn)寬度.png

  • 火狐

    
    
    firefox下input默認(rèn)寬度.png

  • IE

    
    
    IE10下input的默認(rèn)寬度.png

• 解決方案

  • 重置input框的寬度為數(shù)值，不要用瀏覽器默認(rèn)的寬度，否則可能會導(dǎo)致在各個(gè)瀏覽器的表現(xiàn)不一致
  • 重置input的寬度為百分比，而其父元素的寬度由內(nèi)容決定（比如display:inline-block），就會出現(xiàn)本例中的情況，此時(shí)可以定義父元素的寬度，不讓其寬度由內(nèi)容決定