html - 放大日历时 css 样式无效

Question

我有一个带有事件日历的 HTML 代码。
日历如下所示:calendar

我遇到了一些问题，因为当我尝试使用 Ctrl + 滚动鼠标缩放此日历时，缩放时出现问题。例如，在 Google Chrome 和 Mozilla Firefox 中缩放 150%(在其他情况下也是如此)时，会有一个宽度很小的附加列。这可以在此处的图中看到:

zooming calendar

body {
  background-color: #789;
  font-family: georgia, serif;
  font-size: 13px;
}

#content {
  display: block;
  width: 812px;
  margin: 40px auto 10px;
  padding: 10px;
  background-color: #FFF;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 2px solid black;
  -moz-box-shadow: 0 0 14px #123;
  -webkit-box-shadow: 0 0 14px #123;
  box-shadow: 0 0 14px #123;
}

h2,
p {
  margin: 0 auto 14px;
  text-align: center;
}

ul {
  display: block;
  clear: left;
  height: 82px;
  width: 812px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background-color: #FFF;
  text-align: center;
  border: 1px solid black;
  border-top: 0;
  border-bottom: 2px solid black;
}

li {
  position: relative;
  float: left;
  margin: 0;
  padding: 20px 2px 2px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  width: 110px;
  height: 60px;
  overflow: hidden;
  background-color: white;
}

li:hover {
  background-color: #FCB;
  z-index: 1;
  -moz-box-shadow: 0 0 10px #789;
  -webkit-box-shadow: 0 0 10px #789;
  box-shadow: 0 0 10px #789;
}

.weekdays {
  height: 20px;
  border-top: 2px solid black;
}

.weekdays li {
  height: 16px;
  padding: 2px 2px;
  background-color: #BCF;
}

.fill {
  background-color: #BCD;
}

.weekdays li:hover,
li.fill:hover {
  background-color: #BCD;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.weekdays li:hover,
.today {
  background-color: #BCF;
}

li strong {
  position: absolute;
  top: 2px;
  right: 2px;
}

li a {
  position: relative;
  display: block;
  border: 1px dotted black;
  margin: 2px;
  padding: 2px;
  font-size: 11px;
  background-color: #DEF;
  text-align: left;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  z-index: 1;
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-style: italic;
}

li a:hover {
  background-color: #BCF;
  z-index: 2;
  -moz-box-shadow: 0 0 6px #789;
  -webkit-box-shadow: 0 0 6px #789;
  box-shadow: 0 0 6px #789;
}

<div id="content">
  <h2>January 2016</h2>
  <ul class="weekdays">
    <li>Sun
    </li>
    <li>Mon
    </li>
    <li>Tue
    </li>
    <li>Wed
    </li>
    <li>Thu
    </li>
    <li>Fri
    </li>
    <li>Sat
    </li>
  </ul>
  <ul>
    <li class="fill">&nbsp;
    </li>
    <li class="fill">&nbsp;
    </li>
    <li class="fill">&nbsp;
    </li>
    <li class="fill">&nbsp;
    </li>
    <li class="fill">&nbsp;
    </li>
    <li class="">
      <strong>01</strong>
      <a href="view.php?event_id=1">New Year's Day</a>
    </li>
    <li class="">
      <strong>02</strong>
    </li>
  </ul>
  <ul>
    <li class="">
      <strong>03</strong>
    </li>
    <li class="">
      <strong>04</strong>
    </li>
    <li class="">
      <strong>05</strong>
    </li>
    <li class="">
      <strong>06</strong>
    </li>
    <li class="">
      <strong>07</strong>
    </li>
    <li class="">
      <strong>08</strong>
    </li>
    <li class="">
      <strong>09</strong>
    </li>
  </ul>
  <ul>
    <li class="">
      <strong>10</strong>
    </li>
    <li class="">
      <strong>11</strong>
    </li>
    <li class="">
      <strong>12</strong>
    </li>
    <li class="">
      <strong>13</strong>
    </li>
    <li class="">
      <strong>14</strong>
    </li>
    <li class="">
      <strong>15</strong>
    </li>
    <li class="">
      <strong>16</strong>
    </li>
  </ul>
  <ul>
    <li class="">
      <strong>17</strong>
    </li>
    <li class="">
      <strong>18</strong>
    </li>
    <li class="">
      <strong>19</strong>
    </li>
    <li class="">
      <strong>20</strong>
    </li>
    <li class="">
      <strong>21</strong>
    </li>
    <li class="">
      <strong>22</strong>
    </li>
    <li class="">
      <strong>23</strong>
    </li>
  </ul>
  <ul>
    <li class="">
      <strong>24</strong>
    </li>
    <li class="">
      <strong>25</strong>
    </li>
    <li class="">
      <strong>26</strong>
    </li>
    <li class="">
      <strong>27</strong>
    </li>
    <li class="">
      <strong>28</strong>
    </li>
    <li class="">
      <strong>29</strong>
    </li>
    <li class="">
      <strong>30</strong>
    </li>
  </ul>
  <ul>
    <li class="">
      <strong>31</strong>
      <a href="view.php?event_id=2">Last Day of January</a>
    </li>
    <li class="fill">&nbsp;</li>
    <li class="fill">&nbsp;</li>
    <li class="fill">&nbsp;</li>
    <li class="fill">&nbsp;</li>
    <li class="fill">&nbsp;</li>
    <li class="fill">&nbsp;</li>
  </ul>

如何避免这个问题？

Answer 1

你能检查一下吗...

body {
	background-color: #789;
	font-family: georgia, serif;
	font-size: 13px;
}
#content {
	display: block;
	width: 812px;
	margin: 40px auto 10px;
	padding: 10px;
	background-color: #FFF;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border:2px solid black;
	-moz-box-shadow: 0 0 14px #123;
	-webkit-box-shadow: 0 0 14px #123;
	box-shadow: 0 0 14px #123;
}
h2, p {
	margin: 0 auto 14px;
	text-align: center;
}
ul {
	display: block;
	clear: left;
	height: 80px;
	width: 812px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	background-color: #FFF;
	text-align: center;
	border: 1px solid black;
	border-top: 0;
	border-bottom: 2px solid black;
}
li {
	position: relative;
	float: left;
	margin: 0;
	padding: 20px 0px 0px;
	width: 14.28571428571429%;
	height: 60px;
	overflow: hidden;
	background-color: white;
}
li:before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width: 1px;
	background-color:#000;
}
li:after {
	content:'';
	position:absolute;
	right:0;
	top:0;
	height:100%;
	width: 1px;
	background-color:#000;
}
li:hover {
	background-color: #FCB;
	z-index: 1;
	-moz-box-shadow: 0 0 10px #789;
	-webkit-box-shadow: 0 0 10px #789;
	box-shadow: 0 0 10px #789;
}
.weekdays {
	height: 20px;
	border-top: 2px solid black;
}
.weekdays li {
	height: 20px;
	padding: 0;
	background-color: #BCF;
	line-height:20px;
}
.fill {
	background-color: #BCD;
}
.weekdays li:hover, li.fill:hover {
	background-color: #BCD;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.weekdays li:hover, .today {
	background-color: #BCF;
}
li strong {
	position: absolute;
	top: 2px;
	right: 2px;
}
li a {
	position: relative;
	display: block;
	border: 1px dotted black;
	margin: 2px;
	padding: 2px;
	font-size: 11px;
	background-color: #DEF;
	text-align: left;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	z-index: 1;
	text-decoration: none;
	color: black;
	font-weight: bold;
	font-style: italic;
}
li a:hover {
	background-color: #BCF;
	z-index: 2;
	-moz-box-shadow: 0 0 6px #789;
	-webkit-box-shadow: 0 0 6px #789;
	box-shadow: 0 0 6px #789;
}

<ul class="weekdays">
  <li>Sun </li>
  <li>Mon </li>
  <li>Tue </li>
  <li>Wed </li>
  <li>Thu </li>
  <li>Fri </li>
  <li>Sat </li>
</ul>
<ul>
  <li class="fill">&nbsp; </li>
  <li class="fill">&nbsp; </li>
  <li class="fill">&nbsp; </li>
  <li class="fill">&nbsp; </li>
  <li class="fill">&nbsp; </li>
  <li class=""> <strong>01</strong> <a href="view.php?event_id=1">New Year's Day</a> </li>
  <li class=""> <strong>02</strong> </li>
</ul>
<ul>
  <li class=""> <strong>03</strong> </li>
  <li class=""> <strong>04</strong> </li>
  <li class=""> <strong>05</strong> </li>
  <li class=""> <strong>06</strong> </li>
  <li class=""> <strong>07</strong> </li>
  <li class=""> <strong>08</strong> </li>
  <li class=""> <strong>09</strong> </li>
</ul>
<ul>
  <li class=""> <strong>10</strong> </li>
  <li class=""> <strong>11</strong> </li>
  <li class=""> <strong>12</strong> </li>
  <li class=""> <strong>13</strong> </li>
  <li class=""> <strong>14</strong> </li>
  <li class=""> <strong>15</strong> </li>
  <li class=""> <strong>16</strong> </li>
</ul>
<ul>
  <li class=""> <strong>17</strong> </li>
  <li class=""> <strong>18</strong> </li>
  <li class=""> <strong>19</strong> </li>
  <li class=""> <strong>20</strong> </li>
  <li class=""> <strong>21</strong> </li>
  <li class=""> <strong>22</strong> </li>
  <li class=""> <strong>23</strong> </li>
</ul>
<ul>
  <li class=""> <strong>24</strong> </li>
  <li class=""> <strong>25</strong> </li>
  <li class=""> <strong>26</strong> </li>
  <li class=""> <strong>27</strong> </li>
  <li class=""> <strong>28</strong> </li>
  <li class=""> <strong>29</strong> </li>
  <li class=""> <strong>30</strong> </li>
</ul>
<ul>
  <li class=""> <strong>31</strong> <a href="view.php?event_id=2">Last Day of January</a> </li>
  <li class="fill">&nbsp;</li>
  <li class="fill">&nbsp;</li>
  <li class="fill">&nbsp;</li>
  <li class="fill">&nbsp;</li>
  <li class="fill">&nbsp;</li>
  <li class="fill">&nbsp;</li>
</ul>