“-webkit-”（一个CSS属性）在除了谷歌浏览器之外的任何浏览器中都不起作用[关闭]

Posted

技术标签:

【中文标题】“-webkit-”（一个CSS属性）在除了谷歌浏览器之外的任何浏览器中都不起作用[关闭]【英文标题】："-webkit-" (a CSS property) isn't working in any browser except google chrome [closed] 【发布时间】：2014-09-29 08:12:17 【问题描述】：

我在我的项目中使用了一些 -webkit- 属性来制作圆形标签框、动画和旋转的东西。但是，我可以实现 javascript 来完成任务。由于 -webkit- 提供了非常简单的代码格式并且避免了大量的编码，我很喜欢使用它。现在，虽然在 chorome 中打开页面工作正常，但其他网络浏览器如 IE、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;
    );
);

【问题讨论】：

chrome 是-webkit- firefox 是-moz- 看看不同浏览器的规格是什么... 我会阅读有关供应商前缀的信息。 -webkit- 顾名思义，仅适用于基于 webkit 的浏览器（Chrome、Safari、android 等）。这是一本不错的读物：css-tricks.com/how-to-deal-with-vendor-prefixes 一个简单的谷歌搜索会很快回答你的问题。 【参考方案1】：

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

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

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

【讨论】：

【参考方案2】：

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

【讨论】：

一个明确的答案。这就是我想要的。 不客气。请确保您始终首先包含标准版本。【参考方案3】：

是的 -webkit- 仅适用于 webkit 浏览器（包括 safari 的 Chrome）。

您需要以下供应商前缀：

-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。 opera > 12 也有 webkit 我不认为这是正确的。它们都是基于 webkit 引擎的浏览器。但是，它们是两种完全不同的浏览器，由完全不同的公司制造。 Google Chrome 是一种浏览器，Apple 的 Safari 是另一种。他们唯一真正的共同点是 webkit 引擎。 Chrome 不再基于 webkit，它使用了 blink。 @Quentin 谢谢我对此一无所知，这就是标准方式。【参考方案4】：

WebKit 是一个用于 Safari/Chrome 的 HTML/CSS Web 浏览器渲染引擎。是否有适用于 IE/Opera/Firefox 的此类引擎，使用其中一种引擎有什么区别、优缺点？例如，我可以在 Firefox 中使用 WebKit 功能吗？

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

IE → Trident 火狐/Seamonkey → Gecko 歌剧→Presto Safari/Chrome → WebKit.

请参阅Comparison of web browser engines 了解不同领域的比较列表。

终极问题……IE是否支持WebKit？

不是原生的。

【讨论】：

【参考方案5】：

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

【讨论】：

以上是关于“-webkit-”（一个CSS属性）在除了谷歌浏览器之外的任何浏览器中都不起作用[关闭]的主要内容，如果未能解决你的问题，请参考以下文章

CSS3图片倒影技术实现及原理

css怎么让Chrome支持小于12px 的文字

【H5 CSS】【译】progress元素样式

css3属性补充

CSS属性前的 -webkit, -moz,-ms,-o

CSS3实现圆角边框除了像素还能怎么弄？