"-webkit-"(CSS属性)在除谷歌浏览器之外的任何浏览器中都不起作用

我在我的项目中使用了一些-webkit-属性来制作圆角标签框，动画和旋转的东西。但是，我可以实现javascript来完成任务。由于webkit提供了非常简单的代码格式，避免了大量的编码，我喜欢使用它。现在，虽然在chrome中打开页面可以正常工作，但在IE等其他浏览器中，mozilla无法检测到它。它不会生成任何圆形盒子或动画。如何在我现有的html和css代码修复?

。php类:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>Fatah's Homepage</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="design.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<header id="top_header" >
<h1>Welcome to my world!</h1>
<div id="style_slogan">
<h1 id="header_slogan"><i>Raise your hand, Make A change</i></h1>
</div>
</header>
<div id="giant_wrapper">
<div id="top_menu">
<ul>
<li><a href="#home"><div id="rollover_box_home"><p id="text_shadow_home">HOME</p></div></a></li>
<li><a href="#who_im"><div id="rollover_box_who_im">WHO I'M</div></a></li>
<li><a href="#gallery"><div id="rollover_box_gallery">GALLERY</div></a></li>
<li><a href="#diary"><div id="rollover_box_diary">MY DIARY</div></a></li>
<li><a href="#blog"><div id="rollover_box_blog">FATAH'S BLOG</div></a></li>
<li><a href="#contact"><div id="rollover_box_contact">CONTACT ME</div></a></li>
</ul>
</div>
<div id="new_div">
<section id="main_section">
<!--This div section is for main contaents for my website. All the correcponding 
text and paragraph will be added here-->
<div id="all_contents">
<div id="home">
<p>You are very welcome to my personal homepage. This is my very first creation over the web.
</p>
</div>
<div id="who_im">
<p>
my name is jabir and i was living in a small village.</b>
</p>
</div>
<div id="gallery">
<p> It's Gallery.</p>
</div>
<div id="diary">
<p> It's diary.</p>
</div>
<div id="blog">
<p> It's my blog.</p>
</div>
<div id="contact">
<p> contact info.</p>
</div>
</div>
</section>
</div>
</div>
<footer id="the_footer">
Developed by Jabir Al Fatah 2014
</footer>
</div>
<script type="text/javascript" src="js/scripting.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
</body>
</html>

. css类:

/*@import url('http://getbootstrap.com/dist/css/bootstrap.css');*/
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
font-size:27px;
}
#header_slogan{
font-size:22px;
color:#CCFF00;
font: bold  22px Century Gothic;
}
#rollover_box_home{
display:block;
border:3px solid blue;
background:orange;
/*background:-webkit-radial-gradient(center, circle, red 0%, orange 50%);*/
/*background:-webkit-linear-gradient(top, black, white);*/
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_home:hover{
-webkit-transform:rotate(7deg);
}
#rollover_box_who_im{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_who_im:hover{
-webkit-transform:rotate(7deg);
}
#rollover_box_gallery{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_gallery:hover{
-webkit-transform:rotate(7deg);
}
#rollover_box_diary{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_diary:hover{
-webkit-transform:rotate(7deg);
}
#rollover_box_blog{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_blog:hover{
-webkit-transform:rotate(7deg);
}
#rollover_box_contact{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
}
#rollover_box_contact:hover{
-webkit-transform:rotate(7deg);
}
#text_shadow_home{
text-shadow:rgb(110,110,110) 3px 3px 5px;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer, aside, nav, article, hgroup{
display:block;
}
body{
width:100%;
-webkit-box-pack:center;
background-color:#003300;
}
#wrapper{
max-width:1000px;
margin:20px auto;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;
}
#top_header{
background:green;
border:3px solid orange;
padding:20px;
text-align:center;
}
#top_menu{
background:black;
color:white;
border:3px solid #FF0000 ;
padding:4px;
text-align:center;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
-webkit-box-flex:1;
margin:20px;
padding:20px;
background:#996600
}
#the_footer{
color:black;
text-align:center;
padding:20px;
border-top: 2px solid red;
background-color:gray;
}
#all_contents >div {
display:none;
}
#all_contents{
background-color:#00FFFF;
border:10px solid #0000FF;
padding:8px;
-webkit-border-radius:20px;
-webkit-transition:-webkit-transform 2s;
}
#all_contents:hover{
-webkit-transform:rotate(90deg);
}
#home{
font-size:20px;
}
#who_im{
font-size:20px;
}

. js文件:

$(document).ready(function(){
$('#all_contents>div').filter(':first').show();
$('ul>li>a').click(function () {
        $('#all_contents>div').hide();
        var $this = $(this);
        var target = $this.attr('href');
        $(target).show();
        return false;
    });
});

-foo-是用于实验性CSS属性的前缀(可能会有变化，不打算用于生产)

去掉前缀，使用该属性的标准版本。

如果您想冒险使用浏览器供应商不考虑在黄金时段读取的实验性实现，请考虑使用各种前缀(-webkit-, -moz-, -o-, -ms-)复制属性。

因为-webkit-意味着只能在chrome和safari上工作。在你的代码中，

-webkit-transform:scale(1.1);

你需要添加，

 transform:scale(1.1);        //standard one
-webkit-transform:scale(1.1); // for chrome && safari
-moz-transform:scale(1.1);    //for mozilla
-o-transform:scale(1.1);      // for opera
-ms-transform:scale(1.1);;    //for Internet explorer

像这样的

，你需要添加到所有你添加了-webkit-的地方。不要忘记添加标准属性。

是-webkit-仅适用于webkit浏览器(chrome包括safari)。

您需要以下供应商前缀:

-webkit- /* for chrome */
-moz- /* for firefox */
-o- /* for opera */
-ms- /* for ie */

所以，你应该这样写:

-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
-ms-transform:scale(1.1);
transform:scale(1.1); /*standard way*/

WebKit是一个用于Safari/Chrome的HTML/CSS网页浏览器渲染引擎。IE/Opera/Firefox有这样的引擎吗?它们之间的区别是什么，优缺点是什么?例如，我可以在Firefox中使用WebKit功能吗?

每个浏览器都有一个渲染引擎来绘制HTML/CSS网页。

IE →三叉戟
Firefox/Seamonkey →壁虎
歌剧→转眼间
Safari和Chrome →WebKit。

请参阅web浏览器引擎的比较，以获得不同区域的比较列表。

最终的问题…IE支持WebKit吗?

不是本地。

你需要一个webkit浏览器来使用-webkit- CSS

http://caniuse.com/是一个很好的CSS参考，如果他们需要前缀或不:

http://caniuse.com/border-radius

http://caniuse.com/css-transitions

http://caniuse.com/css-boxshadow

http://caniuse.com/css-animation

相关内容

最新更新

热门标签：