“-webkit-”（CSS属性）在除谷歌浏览器之外的任何浏览器中都不起作用

时间：2014-08-06 11:46:18

标签： javascript jquery css html5

我在项目中使用了几个-webkit-属性来制作圆形标签框，动画和旋转内容。但是，我可以实现javascript来完成任务。由于-webkit-提供非常简单的代码格式并避免大量编码，所以我很喜欢使用它。现在，虽然在chorome中打开页面工作正常，但是像IE这样的其他Web浏览器，Mozila无法检测到它。它不会制作任何圆形框或任何动画。如何在我现有的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;
    });
});

5 个答案:

答案 0 :(得分：1)

-foo-是CSS属性在实验时使用的前缀（可能会发生变化而不是用于生产）。

取消前缀以使用该属性的标准版本。

如果您想冒险使用浏览器供应商提供的实验性实施，请考虑使用各种前缀（-webkit-，-moz-，-o-，-ms-）复制该属性考虑阅读黄金时间。

答案 1 :(得分：0)

是-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*/

答案 2 :(得分：0)

  

WebKit是Safari / Chrome的HTML / CSS Web浏览器呈现引擎。 IE / Opera / Firefox是否有这样的引擎？使用其中一个的优点和缺点是什么？我可以在Firefox中使用WebKit功能吗？

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

请参阅Comparison of web browser engines以获取不同领域的比较列表。

  

最终的问题是...... IE支持WebKit吗？

不是原生的。

答案 3 :(得分：0)

您需要一个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

答案 4 :(得分：0)

因为-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-。不要忘记添加标准属性。

相关问题
最新问题