none
移植HTML+CSS应用时,CSS文件出现CSS属性值无效的问题 RRS feed

  • 问题

  • 以下CSS设置中,-webkit和-moz开头的CSS属性Win8好象不认,VS2012提示CSS属性值无效,请问应该用什么CSS属性代替,以便完成同样的效果?

    另:我原来做的HTML应用在IE上运行不行,可以在Chorme和Firfox上运行,用的是JQuery插件。

    @font-face {
        font-family: 'BebasNeueRegular';
        src: url('fonts/BebasNeue-webfont.eot');
        src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/BebasNeue-webfont.woff') format('woff'),
             url('fonts/BebasNeue-webfont.ttf') format('truetype'),
             url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    /* CSS reset */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
     margin:0;
     padding:0;
    }
    html,body {
     margin:0;
     padding:0;
    }
    table {
     border-collapse:collapse;
     border-spacing:0;
    }
    fieldset,img {
     border:0;
    }
    address,caption,cite,code,dfn,th,var {
     font-style:normal;
     font-weight:normal;
    }
    ol,ul {
     list-style:none;
    }
    caption,th {
     text-align:left;
    }
    h1,h2,h3,h4,h5,h6 {
     font-size:100%;
     font-weight:normal;
    }
    q:before,q:after {
     content:'';
    }
    abbr,acronym { border:0;
    }
    section, header{
     display: block;
    }
    /* General Demo Style */
    body{
     font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
     background: #333 url(../images/bg.jpg) repeat top left;
     font-weight: 400;
     font-size: 15px;
     color: #f0f0f0;
     overflow-y: scroll;
    }
    a{
     color: #ddd;
     text-decoration: none;
    }
    a:hover{
     color: #fff;
    }
    .container{
     width: 100%;
     ;
     text-align: center;
    }
    .clr{
     clear: both;
    }
    .container > header{
     padding: 20px 30px 10px 30px;
     margin-bottom: 40px;
     margin-top:30px;
     ;
     display: block;
        text-align: center;
    }
    .container > header h1{
     font-family: "BebasNeueRegular", Arial, sans-serif, simhei;
     font-size: 35px;
     ;
     font-weight: 300;
     text-transform: uppercase;
     color: rgba(101,141,114,0.9);
     text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
        padding: 0px 0px 5px 0px;
    }
    .container > header span{
     color: grey;
     font-size:14px;
     line-height:20px;
     text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
    }
    .container > header h2{
     
    }
    /* Header Style */
    .codrops-top{
     line-height: 24px;
     font-size: 11px;
     background: rgba(255, 255, 255, 0.5);
     text-transform: uppercase;
     z-index: 9999;
     ;
     box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
     -webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;
    }
    @-webkit-keyframes slideOut{
     0%{top:-30px; opacity: 0;}
     100%{top:0px; opacity: 1;}
    }
    .codrops-top a{
     padding: 0px 10px;
     letter-spacing: 1px;
     color: #333;
     text-shadow: 0px 1px 1px #fff;
     display: block;
     float: left;
    }
    .codrops-top a:hover{
     background: #fff;
    }
    .codrops-top span.right{
     float: right;
    }
    .codrops-top span.right a{
     float: left;
     display: block;
    }
    .codrops-demos{
     text-align:center;
     display: block;
     padding-top: 20px;
    }
    .codrops-demos a,
    .codrops-demos a.current-demo,
    .codrops-demos a.current-demo:hover{
        display: inline-block;
     border: 1px solid #719c7f;
     padding: 4px 10px 3px;
     font-size: 13px;
     line-height: 18px;
     margin: 0px 3px;
     font-weight: 800;
     -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
     -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
     box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
     color: #fff;
     text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     background: #90bd9e;
     background: -moz-linear-gradient(top, #90bd9e 0%, #72a081 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#90bd9e), color-stop(100%,#72a081));
     background: -webkit-linear-gradient(top, #90bd9e 0%,#72a081 100%);
     background: -o-linear-gradient(top, #90bd9e 0%,#72a081 100%);
     background: -ms-linear-gradient(top, #90bd9e 0%,#72a081 100%);
     background: linear-gradient(top, #90bd9e 0%,#72a081 100%);
    }
    .codrops-demos a:hover{
     background: #85b995;
    }
    .codrops-demos a:active{
     -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
     -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);
     box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
    }
    .codrops-demos a.current-demo,
    .codrops-demos a.current-demo:hover{
     color: #506757;
     text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    }
    /* Media Queries */
    @media screen and (max-width: 767px) {
     .container > header{
      text-align: center;
     }
     p.codrops-demos {
      ;
      top: auto;
      left: auto;
     }
    }

    2012年11月20日 3:11

答案