微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

html – 缩放日历期间的css样式无效

分类：HTML作者：编程之家AI导航网
我有一个带有活动日历的 HTML代码.日历如下所示： calendar

我有一些问题,因为当我尝试使用Ctrl滚动鼠标来缩放此日历时,然后使用缩放会出现问题.例如,在Google Chrome和Mozilla Firefox中缩放150％(在其他情况下也是如此),还有一个宽度很小的附加列.这可以在图中看到：zooming calendar

HTML日历的结构如下所示：
   

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

CSS看起来像：

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;
}

如何避免这个问题？

解决方法

你能检查一下…… 

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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据
准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name: &#39;&#39;, level: 0}, {id:2 , parentId: 0
vue阻止冒泡事件 阻止点击事件的执行 结合div和组件阻止点击事件
vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&quot;alerA1()&quot; &gt; &lt;div @click.stop=&quot;alerA2()&gt;&lt;div&gt; &lt;/div&gt; 这样就可以实现阻止点击 点击&#160;alerA2
自用代码css获取任意网址的/favicon.ico的方法教程
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用这种办法获取 如果有好的方法望评论告知 谢谢 &lt;img :ng-src=&quot;&#39;http://&#39;+list.url+&#39;/favicon.ico&#39;&quot; :src=&quot;&#39;ht
JS实现 JSON扁平数据转换树状数据
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name: &#39;&#39;, level: 0}, {id:2 , parentId: 0, name: &#39;&#39;, level: 0}, {id:3 , parentId: 2, name: &#39;&
JAVA下载文件防重复点击,防止多次下载请求，Cookie方式快速简单集成教程
JAVA下载文件防重复点击,防止多次下载请求，Cookie方式快速简单集成教程 JS文件在最下面: 引入 &lt;script src=&quot;${path}/js/jquery-2.0.3.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot
Mip是什么意思以及作用有哪些
Mip是什么意思以及作用有哪些
怎么测试Mip页面运行情况
怎么测试Mip页面运行情况
MIP安装的具体步骤有哪些
MIP安装的具体步骤有哪些
HTML添加超链接、锚点的方法及作用详解（附视频）
HTML添加超链接、锚点的方法及作用详解（附视频）
MIP的规则有哪些
MIP的规则有哪些
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native