chrome上的表定位问题

时间：2015-01-19 11:50:27

标签： html css google-chrome

我已经在mozilla firefox上实现了这个日历令人满意，当我尝试在chrome上查看它时，表格并没有填满所有的父节。表高度与父节相同，但它已向底部移动了一点，在节和表之间产生了一个空白区域。

铬： Chrome

火狐： Firefox

在firefox中工作。

这是代码，你可以在demo上试一试，看看chrome和firefox之间的区别：

.right{
float:right !important;
}
.wz-ui-input[type="checkbox"] {
display: none;
}
.wz-ui-input {
background-color: #fcfeff;
border: 1px solid #dcdcdc;
border-radius: 3px;
box-shadow: 0 1px rgba(0, 0, 0, 0.05) inset;
color: #464646;
cursor: text;
font-size: 13px;
height: 28px;
padding: 0 10px;
width: 204px;
}
.wz-ui-input[type="checkbox"] + label i {
background: url("@static/checkbox_white.png") no-repeat scroll -17px 0 / 51px 17px rgba(0, 0, 0, 0);
display: inline-block;
height: 17px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 17px;
}
/* Shadow */
.hide {display:none;}
.abs {position:absolute; z-index: 3;}
.fullHeight{height:100%;}
.fullWidth{width:100%;}
.top{top:0;}
.dark{background-color:#999; background-color: rgba(123,123,123,0.7); opacity: 0.7;}
.center {text-align: center}
/* Calendar Top Bar */
.wz-ui-header{
width:100%;
height: 39px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #f1f1f1;
-webkit-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
background-image: -webkit-linear-gradient(bottom, #b83e38, #da605b);
background-image: -moz-linear-gradient(bottom, #b83e38, #da605b);
background-image: -o-linear-gradient(bottom, #b83e38, #da605b);
background-image: -ms-linear-gradient(bottom, #b83e38, #da605b);
background-image: linear-gradient(to top, #b83e38, #da605b);
}
.shadow-border{
height: 38px;
width:100%;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #fdfeff;
border: solid 1px rgba(0,0,0,.15);
}
.calendar-menu{
display:block;
float:left;
width:85%;
}
.calendar-menu li {
border-bottom: 2px solid transparent;
color: #e9b9b7;
display: inline-block;
font-size: 15px;
height: 28px;
margin: 0 11px;
padding: 8px 1px 0;
}
.calendar-menu li.active-type {
border-bottom: 3px solid #7ebe30;
color: #ffffff;
}
.calendar-menu li:hover {
border-bottom: 3px solid #fff;
}
.calendar-menu-nav{
width:auto;
float:left;
}
.calendar-menu-event-finder {
width:auto;
height: 21px;
padding: 5px 10px;
}
.calendar-menu-event-finder input{
width: 137px;
height: 25px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 2px rgba(0,0,0,.05);
box-shadow: inset 0 2px rgba(0,0,0,.05);
border: solid 1px #a64440;
}
.calendar-buttons{
border-left: 1px solid #9f3e3a;
height: 100%;
width: 135px;
}
.wz-view-minimize, .wz-view-maximize, .wz-view-close, .close-image {
border: 1px solid transparent;
border-radius: 2px;
float: left;
height: 9px;
padding: 6px;
width: 10px;
margin: 9px 10px 10px;
}
.wz-view-minimize i{
background: url("@static/minimize.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-maximize i{
background: url("@static/enlarge.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-close i {
background: url("@static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.close-image i{
background: url("@static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
/* Calendar general */
.calendar-head {
background: none repeat scroll 0 0 #fff;
height: 35px;
}
#day-calendar, #week-calendar, #month-calendar{
display: none;
}
.calendar-active{
width: 100%;
height: 85%;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
display:block !important;
}
/* Calendar Modals */
#my-calendars-modal{
width: 210px;
height: 122px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
position: absolute;
display: none;
margin-left: 12px;
margin-top: 31px;
z-index: 2;
}
#my-calendars-modal .my-calendars-list {
margin-left: 11px;
margin-top: 11px;
}
#my-calendars-modal .my-calendars-list articles {
margin-bottom: 11px;
font-size: 13px;
}
#my-calendars-modal .calendar {
display: block;
width: 100% !important;
}
#my-calendars-modal .calendar i{
float: left;
}
#my-calendars-modal .calendar span figure {
border-radius: 4px;
float: left;
height: 8px;
margin-right: 5px;
position: relative;
top: 4px;
width: 8px;
}
#my-calendars-modal .deleteCalendar{
margin-right: 10px;
font-size: 12px;
color:#dc513a;
}
#work span figure{
background-color: #34aadc;
}
#office span figure{
background-color: #5856d6;
}
#home span figure{
background-color: #f79a03;
}
#my-calendars-modal .add-new-calendar{
text-align: center;
border-top: 1px solid #dadada;
width: 100%;
padding: 11px 0;
font-size: 13px;
}
#create-event-modal{
width: 289px;
height: 289px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 11.5%;
font-size:13px;
}
#create-calendar-modal{
width: 289px;
height: 198px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 17%;
font-size:13px;
}
#create-calendar-modal .calendar-name input{
width: 161px;
height: 26px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
border-radius: 3px;
}
#create-calendar-modal .calendar-name {
margin-left: 6%;
position: relative;
top: 32px;
float: left;
}
#create-calendar-modal .calendar-color {
margin-left: 9%;
position: relative;
top: 39px;
float: left;
}
#create-calendar-modal .calendar-color input{
width: 16px;
height: 12px;
}
#create-calendar-modal .calendar-description {
margin-left: 6%;
position: relative;
top: 49px;
float: left;
}
#create-calendar-modal .calendar-description textarea{
width: 260px;
height: 49px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
margin-top: 6px;
border-radius: 3px;
}
#create-calendar-modal .create-calendar-button{
width: 71px;
height: 23px;
background-color: #75d142;
-webkit-box-shadow: inset 0 1px rgba(255,255,255,.3);
-moz-box-shadow: inset 0 1px rgba(255,255,255,.3);
box-shadow: inset 0 1px rgba(255,255,255,.3);
border: solid 1px #1b961b;
background-image: -webkit-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -moz-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -o-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -ms-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: linear-gradient(to top, #4e9c21, #7ebe30);
margin-right: 10px;
margin-top: 68px;
color: #fff;
border-radius: 4px;
}
#create-calendar-modal .close-image {
float: right;
left: 250px;
position: absolute;
top: -4px;
cursor: pointer;
}
#create-calendar-modal .close-image i{
cursor: pointer;
}
.my-calendars, .current-month, .create-event {
float: left;
font-size: 14px;
margin-left: 12px;
padding: 11px 0;
width: auto;
}
.my-calendars, .my-calendars span, .create-event, .my-calendars img, .current-month img, .create-event span, .create-event img, .add-new-calendar, .add-new-calendar img, .add-new-calendar span, .deleteCalendar{
cursor:pointer;
}
.current-month{
margin-left:29%;
}
.current-month span{
margin: 0 20px;
}
.create-event{
margin-right: 20px;
}
.calendar-body{
height: 481px;
}
.calendar-body table{
width:100%;
height: 100%;
background: white;
}
td.other-month-cell{
background: #f1f1f1;
}
.calendar-days th{
font-size: 14px;
}
thead{
height: 33px;
background-color: #f1f1f1;
border-bottom: solid 2px #cacaca;
}
tbody{
height: 443px;
}
/* Month calendar */
#month-calendar td, #month-calendar th {
border: 1px solid #dadada;
text-align: left;
width: 14.2857%;
}
#month-calendar td span {
top: 6px;
margin-left: 6px;
position: relative;
}
#month-calendar .calendar-day-bar th {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#month-calendar .day-selected{
background-color: rgba(126,190,48,.1);
border: solid 1px #7ebe30 !important;
}
#month-calendar .event {
color: #4a4a4a;
font-size: 12px;
font-weight: bold;
height: 18px;
margin-left: 2px;
padding-left: 4px;
padding-top: 4px;
position: absolute;
width: 125px;
}
#month-calendar .office{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #d1c4e9;
}
#month-calendar .event:nth-child(2){
margin-top: 10px;
display: block;
}
#month-calendar .event:nth-child(3){
margin-top: 32px;
display: block;
}
#month-calendar .event:nth-child(3)::after {
font-weight: 100;
content: '\A \A 5 more...';
white-space: pre;
color: #828282;
}
/* Week calendar */
#week-calendar td, #week-calendar th {
border: 1px solid #dadada;
text-align: left;
padding-left: 6px;
padding-top: 6px;
width: 12.5%;
}
#week-calendar .calendar-day-bar th, #week-calendar .calendar-day-bar td {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#week-calendar .hour-cell{
height: 41px;
}
/* Day calendar */
/* Images transformation */
.right-arrow{
transform: rotateY(180deg);
}


.wz-selectable, input, textarea, [contentEditable], [contentEditable] * {
cursor: text;
outline: medium none;
}
.wz-unselectable {
cursor: default;
}
[contentEditable] * {
color: inherit;
font-family: inherit;
}
link {
display: none;
height: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
b {
font-weight: bold;
}
ol, ul {
list-style: outside none none;
}
hr {
margin: 0;
padding: 0;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
textarea {
resize: none;
}
audio {
display: none;
height: 0;
}
<section class="calendar-head">
    <section class="my-calendars">
       <span>My calendars</span>
       <img src="https://static.inevio.com/app/207/flechita.png" alt=""> 
    </section>
    <section class="current-month">
        <img class="left-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
        <span>September 2013</span>
        <img class="right-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
    </section>
    <section class="create-event right" id="create-event">
        <img src="" alt="+">
        <span>Create new event</span>
    </section>
    <section id="my-calendars-modal">
        <section class="my-calendars-list">
            <articles id="work" class="calendar">
                <input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Work</span></label>
                <span class="right deleteCalendar">Eliminar</span>
            </articles>
            <articles id="office" class="calendar">
                <input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Office</span></label>
                <span class="right deleteCalendar">Eliminar</span>
            </articles>
            <articles id="home" class="calendar">
                <input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Home</span></label>
                <span class="right deleteCalendar">Eliminar</span>
            </articles>
        </section>
        <section class="add-new-calendar" id="add-new-calendar">
            <img src="" alt="+">
            <span>Add new calendar</span>
        </section>
    </section>
    <section id="create-event-modal">
        <figure class="close-image create-event-modal-close">
            <i></i>
        </figure>
       <!-- Falta implementar -->	
    </section>
    <section id="create-calendar-modal">
        <figure class="close-image create-calendar-modal-close">
            <i></i>
        </figure>
        <form>
            <artricle class="calendar-name">
                <input type="text" placeholder=" Name of calendar">
            </artricle>
            <artricle class="calendar-color">
                <span>Color</span>
                <input type="color">
            </artricle>
            <artricle class="calendar-description">
                <span>Description</span><br>
                <textarea></textarea>
            </artricle>
            <button type="submit" class="create-calendar-button right">Create</button>
        </form>
    </section>
</section>
<section id="month-calendar" class="calendar-body calendar-active">
    <table>
        <thead class="calendar-day-bar">
            <tr class="title-row">
                <th class="title-cell">Sunday</th>
                <th class="title-cell">Monday</th>
                <th class="title-cell">Thusday</th>
                <th class="title-cell">Wednesday</th>
                <th class="title-cell">Thursday</th>
                <th class="title-cell">Friday</th>
                <th class="title-cell">Saturday</th>
            </tr>
        </thead>
        <tbody class="calendar-days">
            <tr class="week-row">
                <td class="other-month-cell"></td>
                <td class="other-month-cell"></td>
                <td class="other-month-cell"></td>
                <td class="other-month-cell"></td>
                <td class="day-cell"><span>1</span></td>
                <td class="day-cell"><span>2</span></td>
                <td class="day-cell"><span>3</span></td>    
            </tr>
            <tr class="week-row">
                <td class="day-cell"><span>4</span></td>
                <td class="day-cell"><span>5</span></td>
                <td class="day-cell"><span>6</span></td>
                <td class="day-cell"><span>7</span></td>
                <td class="day-cell"><span>8</span></td>
                <td class="day-cell"><span>9</span></td>
                <td class="day-cell"><span>10</span></td>
            </tr>
            <tr class="week-row">
                <td class="day-cell"><span>11</span></td>
                <td class="day-cell"><span>12</span></td>
                <td class="day-cell"><span>13</span></td>
                <td class="day-cell"><span>14</span></td>
                <td class="day-cell">
                    <span>15</span>
                    <article class="event office"> Me voy a casar</article>
                    <article class="event"> Reunion con el jefe</article>
                </td>
                <td class="day-cell"><span>16</span></td>
                <td class="day-cell"><span>17</span></td>
            </tr>
            <tr class="week-row">
                <td class="day-cell"><span>18</span></td>
                <td class="day-cell"><span>19</span></td>
                <td class="day-cell"><span>20</span></td>
                <td class="day-cell"><span>21</span></td>
                <td class="day-cell day-selected"><span>22</span></td>
                <td class="day-cell"><span>23</span></td>
                <td class="day-cell"><span>24</span></td>
            </tr>
            <tr class="week-row">
                <td class="day-cell"><span>25</span></td>
                <td class="day-cell"><span>26</span></td>
                <td class="day-cell"><span>27</span></td>
                <td class="day-cell"><span>28</span></td>
                <td class="day-cell"><span>29</span></td>
                <td class="day-cell"><span>30</span></td>
                <td class="day-cell"><span>31</span></td>
            </tr>
        </tbody>
    </table>    
</section>

0 个答案:

没有答案
相关问题
最新问题