html - 网站在 Safari 中表现异常-6ren

html - 网站在 Safari 中表现异常

转载作者：行者123 更新时间：2023-11-28 12:40:53

我正在为某人制作网站/模型，我已经完成并正在测试以确保它可以跨多个浏览器工作。它在 Chrome 和 Opera 中运行良好，但令我惊讶的是，在 Safari 中，一切都变得一团糟。我什至不知道哪里出了问题，就是看起来很奇怪。网址在这里:http://addisonbean.com/site/ .此外，当我上传到我的服务器时，页脚中的标题“查找我们”被向下移动到左侧，即使在 Chrome 中也是如此。

如果有任何帮助，我将不胜感激。这是任何想要的人的来源:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WEARWELL</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>

<header>
    <div id="sub-header">
        <div class="top">
            <div id="sub-top">
                <input type="text" placeholder="Search by keyword or product number">
                <span id="search" class="red-gradient">
                    <input type="submit" value="">
                </span>
                <ul class="red-gradient" id="top-nav">
                    <li>Language</li>
                    <li id="arrow"></li>
                    <li>Where to Buy</li>
                    <li>Login</li>
                    <li>0 Items in RFQ Cart</li>
                </ul>
            </div>
            <span class="clearfix"></span>
        </div>

        <nav id="pages">
            <h1></h1>
            <ul>
                <li>Products</li>
                <li id="current">Resources</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </nav>

        <h2 id="page-title">Resources</h2>

    </div>
<span class="clearfix"></span>
</header>

<section>
    <div id="current-page">Home > <b>Resources</b></div>

    <h3>Lorem Ispum Dolor</h3>
    <nav id="links">
        <li>Wearwell Warrenty PDF</li>
        <li>Maintenance &amp; Upkeep Guide</li>
        <li>Chemical Resistance Guide</li>
        <li>Installation Guide</li>
        <li>2013 PDF Catalog</li>
        <li>Frequently Asked Questions</li>
        <span class="clearfix"></span>
    </nav>

    <h3>Amet Lacinia Nec Hendrer</h3>
    <p id="info">Aenean rhoncus, urna quis faucibus cursus, nunc leo rhoncus velit, vitae aliquam justo lectus eu nunc. Ut elit massa, commodo eget blandit eu, consectetur quis neque. Fusce consectetur libero quis velit mattis dignissim. Sed nibh dui, lacinia nec hendrer vitae turpis.</p>
</section>

<h3 id="bottom">
    We develop working surfaces for industrial athletes
</h3>

<footer>
    <div id="footer-center">
        <table>
            <tbody>
                <tr>
                    <th>Products</th>
                    <th>Resources</th>
                    <th>About Us</th>
                </tr>
                <tr>
                    <td>ErgoDeck</td>
                    <td>Warranty</td>
                    <td>Capabilities</td>
                </tr>
                <tr>
                    <td>Rejuvenator</td>
                    <td>Maintenance Guide</td>
                    <td>News</td>
                </tr>
                <tr>
                    <td>Diamond Plate</td>
                    <td>Chemical Resistance Guide</td>
                    <td>Innovation</td>
                </tr>
                <tr>
                    <td>Grit Shield</td>
                    <td>Installation Guide</td>
                    <td>Request a Demo</td>
                </tr>
                <tr>
                    <td>Rover</td>
                    <td>Download Catalog</td>
                    <td>Request A Site Survey</td>
                </tr>
                <tr>
                    <td>Invision</td>
                    <td>Videos</td>
                    <td>Contact Us</td>
                </tr>
                <tr>
                    <td>Fit Kits</td>
                    <td></td>
                    <td>Terms and Conditions</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>Legal</td>
                </tr>
            </tbody>
        </table>
        <aside>
            <span id="line">
                <img src="img/line.png" alt="">
            </span>
            <span id="content">
                <h4>Find Us</h4>
                <p class="footer-info">
                    Wearwell Inc.
                </p>
                <p class="footer-info">
                    199 Threet Industrial Road <br>
                    Smyrna, Tennessee 37167
                </p>
                <p class="footer-info">
                    Email: <a href="mailto:floors@wearwell.com">floors@wearwell.com</a>
                </p>

                <div id="icons">
                    <a href=""></a>
                    <a href=""></a>
                    <a href=""></a>
                    <a href=""></a>
                    <a href=""></a>
                </div>
            </span>
        </aside>
        <span class="clearfix"></span>
    </div>
</footer>

</body>
</html>

css/样式.css

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
margin: 0;
font-family: helvetica;
background: url('../img/bg.jpg');
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
*:first-child+html .clearfix { zoom: 1; }

.red-gradient {
background: #c33221;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover,  #c33221 0%, #8e2418 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418)); 
background: -webkit-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
background: -o-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
background: -ms-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
background: radial-gradient(ellipse at center,  #c33221 0%,#8e2418 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
color: white;
display: inline-block;
}


header {
background: url('../img/header.jpg');
color: white;
-webkit-box-shadow: 2px 0 6px black;
-moz-box-shadow: 2px 0 6px black;
box-shadow: 2px 0 6px black;
}

#sub-header {
    width: 1200px;
    margin: 0 auto;
}


    .top {
        position: relative;
        right: 0;
        padding-bottom: 20px;
        font-size: 12px;
        font-weight: 200;
    }

        .top input[type=text] {
            margin: 0 1px 0 0;
            border: none;
            padding: 12px;
            height: 28px;
            width: 230px;
            background: rgba(255, 255, 255, .7);
            float: left;
        }

            .top input[type=text]::-webkit-input-placeholder {
                color: black;

            }

            .top input[type=text]::-ms-input-placeholder {
                color: black;
            }

            .top input[type=text]::-moz-placeholder {
                color: black;
            }

        span#search {
            width: 28px;
            height: 28px;
            padding: 12px;
            float: left;
            margin-right: 5px;

        }

        .top input[type=submit] {
            border: none;
            background: url('../img/search.png') 50% 50% no-repeat;
            width: 15px;
            height: 15px;
            padding: 0px;
            float: left;
            position: relative;
            top: -7.5px;
            left: -7.5px;
        }

    #top-nav {
        height: 28px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        #sub-top {
            float: right;
        }

            #top-nav li {
                list-style: none; /* for IE8 */
                display: inline-block;
                height: 28px;
                float: left;
                padding: 8px;
                border-left: 1px solid black;
            }

            #top-nav li:first-child {
                border: none;
            }

            #arrow {
                background: url('../img/nav-arrow.png') 50% 50% no-repeat;
                width: 28px;
                margin: 0;
            }

    nav#pages {
        background: rgba(0, 0, 0, .8);
        height: 64px;
        margin-bottom: 80px;
    }

        nav#pages h1 {
            background: url('../img/logo.png') 50% 50% no-repeat;
            width: 340px;
            height: inherit;
            margin: 0;
            display: inline-block;
        }

        nav#pages ul {
            list-style: none;
            text-transform: uppercase;
            float: right;
            padding: 0;
            margin: 0;
            height: inherit;
            display: inline-block;
        }

            nav#pages li {
                list-style: none; /* for IE8 */
                display: inline-block;
                padding: 20px;
                height: inherit;
                line-height: 34px;
            }

            nav#pages li#current {
                background: #cc3423;
            }

    #page-title {
        float: right;
        background: rgba(0, 0, 0, .8);
        text-align: left;
        padding: 30px;
        padding-left: 40px;     
        padding-right: 375px;
        text-transform: uppercase;
        margin: 75px 0;
    }

section {
background: white;
width: 1220px;
margin: 0 auto;
padding: 15px 25px 100px;
-webkit-box-shadow: 0 3px 10px #555;
-moz-box-shadow: 0 3px 10px #555;
box-shadow: 0 3px 10px #555;
}

#current-page {
    font-size: 12px;
}

section h3 {
    text-transform: uppercase;
    margin: 25px 15px 10px;
}

nav#links {
    list-style: none;
    margin: 0 auto;
    width: 1170px;
    color: #eb6852;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
}

    nav#links li {
        background: #eaeaea;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjRiNGI0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-radial-gradient(center, ellipse cover, #eaeaea 0%, #b4b4b4 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eaeaea), color-stop(100%,#b4b4b4));
        background: -webkit-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
        background: -o-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
        background: -ms-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
        background: radial-gradient(ellipse at center, #eaeaea 0%,#b4b4b4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#b4b4b4',GradientType=1 );

        line-height: 75px;
        width: 382px;
        margin: 4px;
        text-align: center;
        float: left;
        height: 75px;
    }

    nav#links li:nth-child(5) {
        background: #c33221;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-radial-gradient(center, ellipse cover,  #c33221 0%, #8e2418 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418)); 
        background: -webkit-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
        background: -o-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
        background: -ms-radial-gradient(center, ellipse cover,  #c33221 0%,#8e2418 100%);
        background: radial-gradient(ellipse at center,  #c33221 0%,#8e2418 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
        color: white;
    }

#info {
    margin-left: 15px;
}

h3#bottom {
text-align: center;
color: #4d4d4d;
font-size: 40px;
font-weight: 200;
}

footer {
background: url('../img/footer.jpg');
color: white;
}

#footer-center {
    margin: 0 auto;
    padding: 30px 0;
    width: 809px;
}

    footer table {
        float: left;
    }

        footer tr {
            text-align: right;
        }

            footer td {
                padding: 4px;
                padding-left: 30px;
                padding-right: none;
                font-size: 15px;
            }

            footer th {
                text-transform: uppercase;
                padding: 7px;
                padding-left: 30px;
                padding-right: none;
            }

    aside {
        float: left;
    }

        #line {
            margin: 0 35px;
            display: inline-block;
            float: left;
        }

        aside #content {
            float: left;
        }

        aside h4 {
            text-transform: uppercase;
            margin: 7px;
        }

        aside p.footer-info {
            margin: 7px;
            font-size: 15px;
            line-height: 20px;
        }

            aside p.footer-info a {
                color: #cc3524;
                text-decoration: none;
            }

            #icons a {
                height: 34px;
                width: 37px;
                display: inline-block;
                background-repeat: no-repeat;
            }

            #icons a:nth-child(1) {
                background-image: url('../img/icons/fb.png');
            }

            #icons a:nth-child(2) {
                background-image: url('../img/icons/google.png');
            }

            #icons a:nth-child(3) {
                background-image: url('../img/icons/twitter.png');
            }

            #icons a:nth-child(4) {
                background-image: url('../img/icons/youtube.png');
            }

            #icons a:nth-child(5) {
                background-image: url('../img/icons/in.png');
            }

最佳答案

尝试修复来自 W3C Validator 的这些错误, 清除浏览器缓存并在 Safari 中重试。

您的 CSS 也需要一些清理。

关于html - 网站在 Safari 中表现异常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17666275/

文章推荐： css - Firefox - CSS 断字 : break-all unstable

文章推荐： html - 如何使用 CSS 为 textarea 字段的内容设置样式

文章推荐： html - Chrome float 问题

网站
我有这个网站，这个特定页面是安全的，但是当它回发时，它回发到一个不安全的页面。如何解决？我正在使用 ASP.NET 向导。我有这个页面 - checkout.aspx，页面包含这个控件 checko
redirect - 将 Azure 网站 URL 指向另一个 Azure 网站
我有 2 个 azure 网站 - 两个独立的项目我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
redirect - 将 Azure 网站 URL 指向另一个 Azure 网站
我有 2 个 azure 网站 - 两个独立的项目我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
java - 将 React 网站更改为同一域上的 java 网站，但仍显示 React 网站
环境: 旧网站: React 托管在 Heroku URL( http://sameurl.com ) 新网站: Java 托管在 Heroku URL ( http://sameurl.com )
asp.net - 将 ASP.NET 网站 + 数据库发布到 Windows Azure 网站
我已在 Windows Azure 上注册了一个测试帐户来对其进行测试。我构建了一个 Hello world ASP.NET Web 应用程序 + 数据库只是为了测试。我安装了 Visual Stu
performance - : {REST API, 网站} --> {数据库} 或 {网站} --> {REST API} --> {数据库} 哪个更好？
我有一个可以收集和显示各种测量值的产品(不会详细介绍)。正如人们所期望的那样，显示部分是一个数据库+建立在其之上的网站(使用 Symfony)。但是，我们可能还会创建一个 API 来向第三方公开数据
Android软键盘调整背景图片大小(网站)
这个问题在这里已经有了答案: Software keyboard resizes background image on Android (16 个答案) 关闭 8 年前。我有一个类似的问题:So
Maven Checkstyle 网站
这个问题似乎很常见，但我真的无法根据现有答案解决问题。我有一个简单的 maven 项目，没有任何复杂的部署配置等，并且想在点击“mvn site”时生成一个 Maven CheckStyle 报告。
Azure 网站 - 纵向扩展与横向扩展
有没有人看过有关何时进行横向扩展与纵向扩展的最佳选择的任何分析或信息。什么时候一个比另一个更有意义。目前，在标准模式和基本模式下，2 个小型实例的费用与 1 个中型实例的费用相同。拥有 2 个小型
Azure 网站。如何查找有关停止服务的日志
有没有办法找到 azure 网站何时停止？ (我通过门户网站停止了网站，但我不记得是什么时候......) 我正在寻找一些日志，但没有找到任何有用的内容。谢谢。最佳答案您拥有的最接近的是 azu
具有扩展和冗余功能的 Azure 网站
我目前在 Azure VM 的 IIS 中拥有一个网站。我已将该站点复制到 2 个可用区域中的 2 个虚拟机上。这可以保护网站免遭停机。我需要为高负载时刻实现一些可扩展性。这似乎就是创建音阶集的目
Azure CDN 网站
我有一个托管在 Azure 上的网站 ( http://mike-ward.azurewebsites.net/ )。我从 Azure 门户设置了一个指向(引用？)我的网站的 Azure CDN。根据
Azure 网站 - 识别主机插槽
我有一个 Azure 网站(不是 Web 角色)，有 2 个槽:生产和暂存。我只想为生产插槽启用 CDN，而不是为登台启用，问题是我找不到识别主机插槽的方法。 RoleEnvironment 不可用
javascript - 捕获浏览器内容的屏幕截图(网站)
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题，以便可以用事实和引用来回答它。 4年前关
Azure 网站 - 持久文件问题
我们正在考虑将一些网站从 Azure 云服务迁移到 Azure 网站(事情似乎就是这样进行的)。显然，我们被明确告知云服务不会保留文件系统状态，因为它们会在机器故障时重新部署。我假设网站是基于 Bl
连接到虚拟机的 Azure 网站
我有一个 Azure 网站，需要使用在 VM 上运行的 Elasticsearch 服务。虽然我需要能够锁定对 Elasticsearch 的访问，以便只有 Azure 网站可以访问它，但我似乎无法
Azure 网站 DNS
我有一个 azure 网站，位于 yis3.azurewebsites.net - 我已将其提升为“共享”网站，以便我可以使用自定义域。我拥有从 123-reg.co.uk 购买的域名 yorkshi
Azure 网站 - 如何写入文件
我正在使用 abcPDF 动态创建 PDF。我想保存这些 PDF，以便客户随时检索。最简单的方法(也是我现在在当前服务器上所做的方法)是将完成的 PDF 保存到文件系统。看来我一直坚持使用 blo
Azure 网站 - 监控数据
我们正在尝试了解 Windows Azure 管理 API 为 Azure 网站(而非 Webroles)返回的监控数据的复杂性例如，下图描述了为 CPUTime 检索的数据点。它似乎表明，在晚上
具有多个站点的 Azure 网站
看起来真的很愚蠢，因为我找不到它: 门户网站似乎不太直观，我如何为一个“网站”付费并在其中运行最多 500 个网站？我想当我通过单击左下角的加号添加“网站”时，我添加了整个虚拟机而不是子站点。如何仅添

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 网站在 Safari 中表现异常