浮動和內聯塊有時在webkit中不起作用

我檢測到一個問題，影響位於float和display: inline-block的列中的div。讓我舉兩個例子： enter image description here 浮動和內聯塊有時在webkit中不起作用

在第一種情況下（左）名稱「Altair」和按鈕「註銷」與顯示內聯塊定位。第一行顯示了期望的結果，當我使用JQuery動態修改div的內容時，總會發生什麼情況，如第二行所示。當我第一次寫所有的html時，所有的都是正確的。

在另一種情況下（右側），數字「21」的位置是float：left，然後按下月份和年份。在這種情況下，內容總是使用JQuery插入，第二行顯示的問題僅在刷新頁面時出現SOMETIMES。 5次中的1次，或多或少。如您所見，Chrome控制檯說div的寬度爲0px，可能這是觸發問題的原因。我可以在Safari中重現第一種情況（左側），但不能重現（右側）。我無法重現Firefox和Opera中的錯誤，那麼我認爲這與Webkit有關。

你知道發生了什麼，我能解決嗎？感謝您的關注。

HTML和CSS第一種情況：

<div id="login-widget" class="widget"> 
    <div class="name"></div> 
    <div class="button in"> 
     <div class="value">Log - Out 
     </div><div class="decorator"></div> 
    </div> 
</div> 

#login-widget .name { 
    display: inline-block; 
    vertical-align: middle; 
    margin-right: 6px; 
} 
#login-widget .button { 
    border: solid 1px; 
    border-radius: 5px; 
    cursor: pointer; 
    display: inline-block; 
    vertical-align: middle; 
}

HTML和CSS另一種情況：

<div class="date"> 
    <div class="day"></div> 
    <div class="month"></div> 
    <div class="year"></div> 
</div> 

#agenda-widget .date { 
    margin: 0; 
    font-size: 12px; 
} 
#agenda-widget .day { 
    font-size: 45px; 
    line-height: 36px; 
    color: #DB443F; 
    float: left; 
    margin-right: 5px; 
} 
#agenda-widget .month { 
    padding-top: 12px; 
} 
#agenda-widget .year { 
    /*nothing*/ 
}

來源

2012-11-21 davidgnin

我們能看到一些代碼嗎？ – Kyle

發佈您的html和css標記請 – OptimusCrime

我聞到'position：absolute'的某處 –

看來，這是一個Webkit的錯誤。 Fortunelly，它可以通過強制webkit重新繪製元素來解決。作爲this question指着一招就是使用這種簡單的JavaScript代碼：

sel.style.display='none'; 
sel.offsetHeight; // no need to store this anywhere, the reference is enough 
sel.style.display='block';

如果有人找到一個更好的解決方案，我將其標記爲正確的答案，但目前這一工作並能幫助其他人一樣的問題。

來源

2012-11-21 11:05:31 davidgnin

浮動和內聯塊有時在webkit中不起作用

回答

相關問題