浮動DIV工作的權利在Firefox，而不是正確地在IE9和Chrome

比方說，我有以下table like this 浮動DIV工作的權利在Firefox，而不是正確地在IE9和Chrome

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <link href="Theme.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
    <div id="Calendar" style="float:right;"> 
     <div id="calHeader"> 
      <div class="header"> 
       <div></div> 
       <div class="title">awr awrawra</div> 
       <div></div> 
      </div> 
     </div> 

     <div id="calDays"> 
      <div id="calDaysWeek"> 
       <div>Monday</div> 
       <div>Tuesday</div> 
       <div>Wednesday</div> 
       <div>Thursday</div> 
       <div>Friday</div> 
       <div>Saturday</div> 
       <div>Sunday</div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

CSS

<style type="text/css"> 
    #Calendar 
    { 
     border-collapse:collapse; 
    } 
    #Calendar div 
    { 
     border: solid 1px black; 
     vertical-align:middle; 
     text-align:center; 
    } 

    #calHeader, 
    #calDays 
    { 
     display:table; 
     width:100%; 
    } 
    #calHeader > div, #calDays > div 
    { 
     display:table-row; 
    } 
    #calHeader > div > div, 
    #calDays > div > div 
    { 
     display:table-cell; 
    } 
    #calHeader > div > div 
    { 
     width: 50%; 
    } 

    #calHeader .header .title 
    { 
     width:inherit; 
     white-space:nowrap; 
    } 

    #calDaysWeek div 
    { 
     width: 100px; 
    } 

    #calDays .day div 
    { 
     height:50px; 
     text-align:right; 
     vertical-align:text-top; 
    } 
</style>

我想第一排的中心細胞是固定的，其寬度中的內容，第二行中的每個單元寬度爲100px。

現在請讓我，如果我做錯了什麼或失去了一些東西需要被添加IE和Chrome

來源

2012-06-19 StevenChow

JSfiddle甚至沒有在我的IE ..：p – poepje

既然你要天天有100px的固定寬度的整個日曆應該是700像素在任何時候？

如果我的假設是正確的，然後更改

#calHeader, 
#calDays 
{ 
    display:table; 
    width:700px; 
}

來源

2012-06-19 22:43:15 seN

如果你想要的日子總是在寬100像素，必須添加：

#Calendar 
{ 
    border-collapse:collapse; 
    width:700px; 
}

所以日曆不會延長當你調整窗口大小。

來源

2012-06-19 22:48:33

我認爲Patrick說得對。我清理了.header。 http://jsfiddle.net/M7Apt/

來源

2012-06-19 22:50:15 Alvaro

浮動DIV工作的權利在Firefox，而不是正確地在IE9和Chrome

回答

相關問題