填充/邊距的常見問題：我該如何解決它？

我得知是IE7的一個經典問題：填充/邊距的常見問題：我該如何解決它？

<div class="loc_main">  
    <div class="loc_cerca"> 
     <div class="event_cerca_item"> 
      Field 
     </div> 

     <div class="event_cerca_item"> 
      <input type="text" class="loc_cerca_input_hidden" /> 
     </div>  
    </div>  
</div> 

.loc_main 
{ 
    margin-left:30px;  
} 

.loc_cerca 
{ 
    padding-top:50px; 
} 

.loc_cerca_input_hidden 
{ 
    border:1px solid #6D6E70; 
    width:500px; 
} 

.event_cerca_item 
{ 
    width:500px; 
    float:left; 
}

如果您在IE7檢查（這裏有一個例子fiddler），你會看到Input Box繼承margin-left和padding-top從DIV容器。

事實上，如果我換margin-left:30px;與padding-left:30px;（上.loc_main），並用padding-top:50px;margin-top:50px;（上.loc_cerca）就會消失。

這是一個常見的IE7錯誤，但我想知道我該如何解決這個問題。任何想法？或者我只需要記得把margin on top/bottom和padding on left/right？

來源

2011-07-27 markzzz

您應該考慮使用http://code.google.com/p/ie7-js/。不知道它是否會解決您的具體問題，但它是一個非常有用的腳本。 – amal

Interessant腳本！但我想知道是否有其他方法來解決這個特定的問題！謝謝 – markzzz

許多IE7錯誤/不一致是基於某些元素是否具有名爲hasLayout的專有「屬性」。提供它的常用方法是zoom: 1，因爲除了設置hasLayout到true之外，它沒有（相關）副作用。

您的具體示例可以通過將zoom: 1添加到.loc_cerca來解決。

參見：http://jsfiddle.net/gC4gP/17/

來源

2011-07-27 08:54:24 thirtydot

太棒了！謝謝你，兄弟！不知道這個hasLayout;） – markzzz

填充/邊距的常見問題：我該如何解決它？

回答

相關問題