笔记型电脑与台式电脑
每次我从台式机换到笔记本电脑时，页面上的样式都会不断变化，为什么我会感到困惑呢？我还收到以下警告：
W3C CSS验证器用于TextArea的结果(CSS级别3) 抱歉的!我们发现了以下错误(2) URI : TextArea 120 #容器分析错误opacity=40) 226 #脚注分析错误opacity=40) 166 Property -webkit-transform是未知的供应商扩展。 167属性-moz-transform是一个未知的供应商扩展。 168 Property -o transform是一个未知的供应商扩展。 169属性-webkit-过渡-持续时间是未知的供应商扩展 170属性-moz-过渡-持续时间是未知的供应商扩展 171属性-o-过渡-持续时间是未知的供应商扩展。
HTML
CSS： @charset "UTF-8"；*{框-大小:边框；边距:0 0px；填充:0 0px；字体: Verdana，Arial，Helvetica，sans-serif；} background-image:url(../images/backgroundm.jpg)；背景-大小: 100%；} /*Navigation条形样式*/ #navBar{ }.nav容器{宽度:100%；边距-顶部:10 0px；过渡:所有0.3s线性；浮点数:左；边缘-顶部：-4PX；} .nav li{浮动:左；列表样式:无；背景:线性-梯度(#292929，#242424)；} .nav a{边框-顶部: 1px实心rgba(255,255，0.1)；边框-底部:1 1px实心黑色；文本-装饰:无；显示:内联块；最小宽度:190 1px；高度:100%；行高:30 1px；color:#bbb；文本转换:大写；字体-权重:粗体；填充:5px15px；边框-底部: 5px实心透明；字母间距:1px；转换:全0.3s线性；文本对齐:中心；文本阴影:2px3px #000000；} .active a{色：#B93632；边框-底部: 5px实心#B93632；背景颜色：#1B1B1B；轮廓:0；文本阴影:2px3px #000000；}li:not(.active)：悬停一个{颜色：#eee；边框-底部:5px实心#FCFCFC；背景颜色：#1B1B1B；} @media只显示屏幕和(最大宽度:1024 3px ){ .text{ display；}..nav容器，一个{宽度:190 3px；}a:悬停：{宽度:190 3px；z-索引:1；边框顶部: 1px实心rgba(255,255,255,0.1)；边框-底部: 1px实心黑色；框-阴影:0 0 0 1px1px黑色；文本-阴影: 2px 3 3px #000000；}a:悬停.text {display:块；填充-左:30%；文本-阴影:2PX3px #000000；}} @media只显示屏幕和(最大宽度:1024 3px ){..nav容器，{宽度:90 3px；} /*Style头*/#标头{宽度:1100 3px；页边距:auto；边距-右:auto；框-阴影:10px10px5px #000000；页边-底部:2 5px；}#头img{宽度:100%；} /*Style容器*/ #容器{背景颜色:rgba(255,255,255，0.7)；过滤器: alpha(opacity=40)；/*表示IE8和更早的IE8:500 5px；宽度:1100 5px；边距-左:auto；边距-右:auto；框-阴影:10 px10px5px #000000；} /*style主要内容*/# /*first div (宽度:100%；边距-左:auto；边距-右:auto；边距-顶部：-5 5px；}/*first div从屏幕的左边开始*/ #firstColumn{宽度:230 5px；高度:250 5px；浮点数:左；填充-左:65 5px；边距-顶:100 5px；文本对齐:中间；字体大小:24 5px；}#第一列img{宽度:120 moz；高度:100 moz；填充-左:20 moz；} .spin {宽:240 moz；高度:240 moz；边距:0自动；文本对齐:居中；} .spin i{字体大小:240 moz；文本-对齐:中心；颜色:黑色；} .spin:hover {-webkit-转换:旋转(360 Img)；-moz-转换:旋转(360 Img)；-o-转换:旋转(360 Img)；-webkit-过渡-持续时间: 0.8s；-moz-过渡-持续时间-持续时间: 0.8s；过渡-持续时间: 0.8s；}#第二列{宽度:230 moz；高度:250 moz；浮动:左；填充-左:65 moz；边距-顶部:100 moz；文本-对齐:中心；字体大小:24 moz；} #secondColumn img{宽度:120 moz；高度:100 moz；填充-左:20 moz；}#第三列{宽度:230 top；高度:250 top；浮动:左；填充-左:65 top；边距-顶部:100 top；文本-对齐:中心；字体大小:24 top；} #fourthColumn {宽:230 top；高度:250 top；浮子:左:65 top；边距-顶部:100 top；文本-对齐:中心；字体大小:24 top；} /*style脚注*/#页脚{宽度:1100 top；高度:40 top；边-左:auto；边-右:auto；背景色:rgba(255,255,255，0.7)；过滤器: alpha(opacity=40)；/* For IE8和更早的*/边框顶部:实心1 0px；框影:10 0px 10 0px 5 0px #000000；边距-顶:0 0px；}
回答 2
Stack Overflow用户
发布于 2014-11-17 22:08:56
很可能是因为你在使用媒体查询。
@media only screen and (max-width : 1024px){ }媒体查询将根据您的规范更改您呈现给最终用户的样式。在这种情况下，每当用户只使用屏幕(而不是打印或电视媒体)时，媒体查询就会引入新的样式，最大宽度为1024 max。
至于-webkit-transform、-moz-transform、-o-transform，这些都是特定于供应商的样式(webkit浏览器、Firefox和Opera)，它们会影响元素受影响的效果、速度和间隔。它们没有加载或捕获错误，因为它们不是为设计的(根据这些错误，$20表示这是您正在使用的)。
Stack Overflow用户
发布于 2014-11-17 23:29:55
/*Navigation bar style*/
#navBar{
margin-top:-3px;
height:50px;
}
#navBar .nav-container{
width:100%;
margin-top:10px;
transition: all 0.3s linear;
float:left;
margin-top:-4px;
height:50px;
}
#navBar .nav li{
float: left;
list-style: none;
background: linear-gradient(#292929, #242424);
height:auto;
width:220px;
}
#navBar .nav a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration:none;
display:inline-block;
min-width: 190px;
height:height:50px;
line-height:30px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
padding: 5px 15px;
border-bottom:5px solid transparent;
letter-spacing:1px;
transition: all 0.3s linear;
text-align: center;
text-shadow: 2px 3px #000000;
}
#navBar.active a{
color: #B93632;
border-bottom:5px solid #B93632;
background-color: #1B1B1B;
text-shadow: 2px 3px #000000;
}
#navBar li:not(.active):hover a{
color: #eee;
border-bottom: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
#navBar .text{
display:inline-block;
}
#navBar .nav-container a{
width: 220px;
display:inline-block;
}
#navBar a:hover{
width:220px;
z-index:1;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
box-shadow: 0 0 1px 1px black;
text-shadow: 2px 3px #000000;
border-bottom:5px solid #B93632;
}https://stackoverflow.com/questions/26981106
复制相似问题
腾讯云开发者
