可以在以下位置查看完整来源： www.anthonysusedcars.com
Chrome状态：有效！
Safari状态：已破碎！
Firefox状态：未经测试
问题：
导致此网页在Safari中破坏的原因是什么？Chrome可以很好地解决这个问题？谁能想出快速解决方案？
注意：Chrome中存在一个错误，如果您将鼠标悬停在最左侧未选中的导航标签上，则整个页面都会陷入混乱状态。暂时忽略这一点。
支持详情[额外]
谷歌浏览器显示此页面带有一个有趣的效果，我偶然发现基本的CSS3。导航选项卡向下拉，同时向下拉上部标题和下部内容，但其余导航标签保持不变。
当我在Safari中查看该站点时，它让我失望，期望无缝的webkit兼容性，找到一个非常破碎的页面。然后我读到了Chrome最近对Blink的更改。因此，废弃偶然功能并使用更容易复制的跨浏览器，对吧？
嗯......我的老板喜欢这种功能，就像它在Chrome中看到的一样，并希望我修复它以跨浏览器工作。就是这样。到目前为止，我没有解决这个问题，所以我转向专家！
我在这里只关注Webkit - Blink兼容性。该问题的解决方案需要解决损坏的位置，并保持移动功能。
HTML标记[简体]
<!DOCTYPE html>
<html>
<head>
... Content ...
</head>
<body>
<div class="wrapper"><!-- begin wrapper -->
<div class="frame_anchor"><!-- begin frame anchor -->
<div class="header_frame"><!-- begin header frame -->
<div class="nav_bar"><!-- begin header nav bar -->
<a id="selected" href="index.php">
Home
</a>
<a href="car1.php">
Dodge Avenger
</a>
<a href="car2.php">
Jeep Grand Cherokee
</a>
<a href="car3.php">
Chevy Suburban
</a>
<a href="contact.php">
Contact Us
</a>
</div><!-- end head nav bar -->
</div><!-- end header frame -->
</div><!-- end frame anchor -->
<div class="body_center"><!-- begin body center -->
<div class="header"><!-- begin header -->
<div class="header_image"><!-- begin header image -->
<div class="header_title_strip"><!-- begin header title strip -->
<p class="title">
ANTHONY'S AUTO
</p>
<p class="subtitle">
USED CARS AT GREAT PRICES
</p>
<p class="contact_title">
Cell: (318) 332 2031
</p>
</div><!-- end header title strip -->
</div><!-- end header image -->
</div><!-- end header -->
<div class="body"><!-- begin body -->
<div class="body_head_spacer"><!-- begin spacer -->
</div><!-- end spacer -->
<div class="module_title">
<p>
ABOUT US
</p>
</div>
<div class="body_desc"><!-- begin body description -->
<p>
We sell nice, clean cars in good condition, ready for the highway.
</p>
</div><!-- end body description -->
... Content ...
<div class="footer"><!-- begin footer -->
... Content ...
</div><!-- end footer -->
</div><!-- end body center -->
</div><!-- end wrapper -->
</body>
</html>
CSS：[Gradients Removed]
@import url(http://fonts.googleapis.com/css?family=Orbitron:400,700);
body
{
font-family:Arial;
... cross-browser gradient bg ...
}
a:link, a:visited, a:active, a:hover
{
}
p
{
}
div
{
}
.wrapper
{
margin:0px;
padding:0px;
width:100%;
min-height:800px;
}
.body_center
{
overflow:hidden;
transition:min-height 1s;
... cross-browser gradient bg ...
width:800px;
min-height:800px;
margin-left:auto;
margin-right:auto;
-webkit-box-shadow: 7px 7px 5px #000;
-moz-box-shadow: 7px 7px 5px #000;
box-shadow: 0px 0px 80px 7px #000;
padding:0px 0px 0px 0px;
}
.header_image
{
-moz-transition:min-height 1s, background-size 1s;
transition:min-height 1s, background-size 1s;
z-index:2;
background-position:65% 0%;
background-size:100% 160%;
background-repeat:no-repeat;
background-image:url('images/head.png');
position:absolute;
max-height:300px;
min-height:300px;
width:800px;
margin-top:-250px;
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
}
.header_title_strip
{
z-index:2;
opacity:1;
position:absolute;
padding:0px;
width:100%;
height:100px;
... cross-browser gradient bg ...
transition:opacity 2s, height 2s;
-moz-transition:opacity 2s, height 2s;
}
.contact_title
{
float:right;
color:#ffbb28;
margin-right:20px;
font-family: 'Orbitron', sans-serif;
}
.header_title_strip:hover
{
opacity:1;
height:120px;
}
.title span
{
float:left;
display:block;
width:30px;
/* -webkit-transform:rotate(0deg); */
transition:/*-webkit-transform 0.1s,*/ color 0.5s, text-shadow 0.3s;
text-shadow: 4px 4px 4px #000;
}
.title span:hover
{
/* -webkit-transform:rotateY(180deg);
color:#2580be;
*/
text-shadow: 5px 5px 7px #000;
}
.space
{
float:left;
width:20px;
overflow:hidden;
opacity:0;
}
.title
{
position:absolute;
word-spacing:-8px;
top:-15px;
padding:0px 0px 0px 10px;
font-size:35px;
color:white;
font-family: 'Orbitron', sans-serif;
}
.subtitle
{
position:absolute;
margin:55px 0px 0px 10px;
font-size:18px;
color:#ffb400;
font-family: 'Orbitron', sans-serif;
}
.frame_anchor
{
width:800px;
height:20px;
margin-left:auto;
margin-right:auto;
}
.header_frame
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
transition:height 1s;
position:relative;
margin-left:-20px;
top:90px;
z-index:0;
padding:0px 20px 0px 20px;
width:800px;
height:250px;
... cross-browser gradient bg ...
opacity:.77;
}
.nav_bar
{
transition:margin 1s;
padding:210px 0px 0px 0px;
width:100%;
height:70px;
position:relative;
z-index:2;
}
.nav_bar a:link, .nav_bar a:active, .nav_bar a:visited
{
margin-top:0px;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
float:left;
text-decoration:none;
color:black;
display:block;
height:30px;
font-weight:bold;
font-size:12px;
margin:0px 0px 0px 20px;
padding:15px 10px 0px 10px;
text-align:center;
... cross-browser gradient bg ...
border-style: inset;
border-width:0px;
opacity:1;
-moz-transition:opacity 0.1s, box-shadow 0.2s, margin-top 0.2s, padding-top 0.2s;
transition:opacity 0.1s, box-shadow 0.2s, margin-top 0.2s, padding-top 0.2s;
border-radius:0px 0px 5px 5px;
}
#selected
{
... cross-browser gradient bg ...
}
#selected:hover
{
padding-top:15px;
}
.nav_bar a:hover
{
padding-top:20px;
opacity:1;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px -5px 20px #000;
}
.body_head_spacer
{
transition:min-height 1s;
min-height:105px;
}
.body_desc
{
-webkit-box-shadow: 250px -30px 70px -40px#000;
-moz-box-shadow: 250px -30px 70px -40px#000;
box-shadow: 250px -30px 70px -40px#000;
-moz-transition:min-height 1s;
transition:min-height 1s;
position:relative;
top:0px;
z-index:0;
padding:5px;
width:790px;
min-height:250px;
... cross-browser gradient bg ...
opacity:.77;
margin-top:0px;
}
.body_desc p
{
padding:5px;
margin:0px;
background-color:white;
min-height:20px;
text-align:center;
}
.body_module
{
-webkit-box-shadow: 250px -30px 70px -40px#000;
-moz-box-shadow: 250px -30px 70px -40px#000;
box-shadow: 250px -30px 70px -40px#000;
-moz-transition:min-height 1s;
transition:min-height 1s;
position:relative;
margin-top:0px;
top:0px;
z-index:0;
padding:5px 5px 5px 5px;
width:790px;
min-height:180px;
... cross-browser gradient bg ...
opacity:.77;
}
.footer
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
-moz-transition:min-height 1s;
transition:min-height 1s;
margin-top:30px;
top:0px;
z-index:0;
width:800px;
min-height:70px;
... cross-browser gradient bg ...
opacity:.77;
}
.footer p
{
padding:25px 10px 10px 10px;
min-height:20px;
text-align:center;
color:white;
}
.module_title p
{
margin:0px;
padding:10px 5px 5px 0px;
min-height:20px;
}
.module_title
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
font-family: 'Orbitron', sans-serif;
font-weight:bold;
color:#2454e5;
transition:height 1s;
position:relative;
z-index:0;
text-align:center;
margin-top:20px;
padding:5px 5px 5px 5px;
width:25%;
min-height:35px;
... cross-browser gradient bg ...
opacity:.77;
border-radius:0px 170px 0px 0px;
}
答案 0 :(得分：0)
好的，正如Venom上面所说，我最终被迫取消了悬停运动效果。似乎没有其他解决方案。谢谢！