Question

Calendar in Chrome Calendar in Firefox

我的问题是，在Google Chrome中，td的左右边框（在.today样式上方的图像中覆盖了左边框）以某种方式级联到下面的tr的td（如上所示，第1张图片）。这在Firefox（如上所示，第二图像）或IE（与第二图像相同）中都不会发生。我找不到任何理由为什么会发生这种情况（显然，我不会在这里）。

所以我每天都有一个三行tr的日历表;日期框，多日和单日。像这样：

| Date(Day1, tr1, td1) || Date(Day2, tr1, td2) |

| Single(Day1, tr2, td1, NoValue) || Multi(Day2, tr2, td2) |

| No-td || Single(Day2, tr3, td2) |

| Date(Day3, tr4, td1) || Date(Day4, tr4, td2) |

| Single(Day3, tr5, td1) || Single(Day4, tr5, td2) |

| Single(Day3, tr5, td1) || Single(Day4, tr5, td2) |

如上所示，如果日历中显示的事件跨越多天或跨越一整天，则会创建一个名为multi-day的新tr。任何在其中有活动但仅在一天中的某些时段（例如2:30至5:30）活动的日期出现在多日行中，但具有单日课程。在多天活动的同一天发生的任何非多日事件都会出现在单日tr的多日活动下方。如果多日行没有事件，则单日tr不包含tds。如果在日历周没有多日事件，则单日tr占用两行的空间。 Multi day tds附有这种造型：

#block-system-main tr.multi-day td.multi-day{    
border: 1px solid #7C7F12;
border-left: 2px solid #7C7F12;
border-right: 2px solid #7C7F12;
}

单日td没有这种造型。日历是一个带有自定义css的drupal 7模块。我已检查并仔细检查所有标签是否正确关闭。考虑到这只是在chrome及其自定义css中呈现这样的情况，我认为这个bug没有理由与Drupal相关。

最后，如果你真的想通过这里的html，那就是：

    <tr class="date-box">
      <td id="calendar-2014-02-09-date-box" class="date-box past" colspan="1" 
rowspan="1" data-date="2014-02-09"  headers="Sunday"  data-day-of-month="9" >
      <div class="inner">
        <div class="month day"> 9 </div>  </div>
    </td>
    <td id="calendar-2014-02-10-date-box" class="date-box past" colspan="1" 
rowspan="1" data-date="2014-02-10"  headers="Monday"  data-day-of-month="10" >
      <div class="inner">
        <div class="month day"> 10 </div>  </div>
    </td>
    <td id="calendar-2014-02-11-date-box" class="date-box past" colspan="1" 
rowspan="1" data-date="2014-02-11"  headers="Tuesday"  data-day-of-month="11" >
      <div class="inner">
        <div class="month day"> 11 </div>  </div>
    </td>
    <td id="calendar-2014-02-12-date-box" class="date-box past" colspan="1" 
rowspan="1" data-date="2014-02-12"  headers="Wednesday"  data-day-of-month="12" >
      <div class="inner">
        <div class="month day"> 12 </div>  </div>
    </td>
    <td id="calendar-2014-02-13-date-box" class="date-box today" colspan="1" 
rowspan="1" data-date="2014-02-13"  headers="Thursday"  data-day-of-month="13" >
      <div class="inner">
        <div class="month day"> 13 </div>  </div>
    </td>
    <td id="calendar-2014-02-14-date-box" class="date-box future" colspan="1" 
rowspan="1" data-date="2014-02-14"  headers="Friday"  data-day-of-month="14" >
      <div class="inner">
        <div class="month day"> <a href="http://schools.websitedevelopment.ltd.uk/calendar-node-field-date/day/2014-02-14">14</a> </div>  </div>
    </td>
    <td id="calendar-2014-02-15-date-box" class="date-box future" colspan="1" 
rowspan="1" data-date="2014-02-15"  headers="Saturday"  data-day-of-month="15" >
      <div class="inner">
        <div class="month day"> 15 </div>  </div>
    </td>
    </tr>


    <tr class="multi-day">
      <td id="calendar-2014-02-09-0" class="single-day no-entry past" colspan="1"
 rowspan="2" data-date="2014-02-09"  headers="Sunday"  data-day-of-month="9" >
      <div class="inner">
        &nbsp;  </div>
    </td>
    <td id="calendar-2014-02-10-0" class="single-day no-entry past" colspan="1" 
rowspan="2" data-date="2014-02-10"  headers="Monday"  data-day-of-month="10" >
      <div class="inner">
        &nbsp;  </div>
    </td>
    <td id="calendar-2014-02-11-0" class="single-day no-entry past" colspan="1" 
rowspan="2" data-date="2014-02-11"  headers="Tuesday"  data-day-of-month="11" >
      <div class="inner">
        &nbsp;  </div>
    </td>
    <td id="calendar-2014-02-12-0" class="single-day no-entry past" colspan="1" 
rowspan="2" data-date="2014-02-12"  headers="Wednesday"  data-day-of-month="12" >
      <div class="inner">
        &nbsp;  </div>
    </td>
    <td id="calendar-2014-02-13-0" class="single-day no-entry today" colspan="1" 
rowspan="2" data-date="2014-02-13"  headers="Thursday"  data-day-of-month="13" >
      <div class="inner">
        &nbsp;  </div>
    </td>
    <td class="multi-day" colspan="1" rowspan="1" data-date="2014-02-14" >
      <div class="inner">
        <div class="item">
      <div class="view-item view-item-calendar">
      <div class="calendar monthview">
        <div style="background-color:#ffffff;color:#ffffff" class="stripe" title="Key: Event">&nbsp;</div>
        <div class="calendar.91.field_date.0.0 contents">
                          <a href="/open-event">Open Event</a>                      
<span class="date-display-single" property="dc:date" datatype="xsd:dateTime" content="2014-02-14T00:00:00+00:00">(All day)</span>          </div>  
            <div class="cutoff">&nbsp;</div>
          </div> 
      </div>   
    </div>  </div>
    </td>
    <td id="calendar-2014-02-15-0" class="single-day no-entry future" colspan="1" rowspan="2" data-date="2014-02-15"  headers="Saturday"  data-day-of-month="15" >
      <div class="inner">
        &nbsp;  </div>
    </td>
    </tr>


    <tr class="single-day">
      <td id="calendar-2014-02-14-1" class="single-day no-entry noentry-multi-day 
future" colspan="1" rowspan="1" data-date="2014-02-14"  headers="Friday"  data-day-of-month="14" >
      <div class="inner">
        &nbsp;  </div>
    </td>
    </tr>

我也会提供更完整的css代码，但这是drupal，所以有这么多css绒毛，这完全和完全无关的网站和特殊性这个问题。唯一似乎相关的是我在上面提到的CSS。

感谢您花时间阅读这篇文章。

编辑我尝试在空白的html文件中重新创建问题，到目前为止还没有成功。

Chrome将边框应用于下方tr td

0 个答案: