浮动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

回答

相关问题