Invalid css style during zooming in calendar
I have a HTML code with event calendar. Calendar looks as follows: calendar
I have some problem, because when I'm trying zooming this calendar with Ctrl + scroll mouse, then with zooming there is a problem. For instance with zooming 150 %(and in other cases also) in Google Chrome and Mozilla Firefox there is an additional column with little width. This can be seen in the figure here : zooming calendar
HTML Structure of my calendar looks like:
<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">
</li>
<li class="fill">
</li>
<li class="fill">
</li>
<li class="fill">
</li>
<li class="fill">
</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"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
</ul>
CSS looks like:
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;
}
How to avoid this problem?
你可以检查这个...
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"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </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"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
</ul>https://jsfiddle.net/ds2zb4gv/
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;
border: 1px solid black;
border-bottom: 2px solid black;
}
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;
}<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">
</li>
<li class="fill">
</li>
<li class="fill">
</li>
<li class="fill">
</li>
<li class="fill">
</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"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
<li class="fill"> </li>
</ul>
</div></code>上一篇: 如何使用css在IE8中更改禁用的html控件的颜色
下一篇: 放大日历期间无效的css样式