html - 需要跨浏览器修复 : Chrome's Blink + Webkit compatibility

标签 html css

可以在以下位置查看完整的源代码: 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:[渐变移除]

@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;
}

最佳答案

好吧，正如 Venom 上面所说，我最终被迫取消了悬停移动效果。似乎没有其他解决办法。谢谢!

关于html - 需要跨浏览器修复 : Chrome's Blink + Webkit compatibility，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18364949/

上一篇：css - 不同版本的IE布局不同

下一篇：html 背景图像在桌面浏览器上显示正确，而不是在移动设备上

相关文章：

html - 在手机上激活按钮？

jquery - 在鼠标悬停时停止选取框并在鼠标移出时播放

javascript - 通过JQuery在网页上的两个字符之间添加空格

html - 如何在 li 中间垂直对齐文本

javascript - 带有内部链接的 jQuery 工具提示

html - 带有标题的下拉框 - 不会包含在选项中

Android webview 在 "#"字符后不渲染任何内容

javascript - 使用 jquery 滚动显示页面一侧的元素

html - 下拉子菜单中每列只有三个元素

html - 当鼠标悬停在 html/CSS/angular/bootstrap 中时，扩展树的长文本行(嵌套的 HTML 列表)

©2024 IT工具网  联系我们