我的代码在 Chrome 或 Safari 中不起作用答案

【问题标题】：My code doesn't work in Chrome or Safari我的代码在 Chrome 或 Safari 中不起作用
【发布时间】：2015-04-07 20:21:07
【问题描述】：

我一直致力于为一家家族企业创建一个网站。它主要是创建的，但是我无法让它在 Chrome 或 Safari 中工作。具体来说，从页面到页面的链接不起作用。单击左侧的选项卡或顶部的徽标时，您应该被定向到不同的页面。这在 IE 上完美运行。但是，它们在其他 2 中根本不起作用。我看了又看，找不到原因。如果有人可以提供帮助，将不胜感激。

我意识到 Chrome 或 Safari 中的选项卡与 IE 中的选项卡不同。这不是目前要解决的重要问题。

这是其中一个页面的 HTML，因此您可以看到我做了什么以及我在哪里搞砸了。

    <!DOCTYPE html>
<html>
    <head>
        <title>
            BERK Consulting LLC
        </title>
        <style type="text/css">
            a:link {color:white; }
            a:visited{color:white; }
            a:hover {color:white; }
            body {background-color:#F2E8DE}
        </style>
        <script type="text/javascript">

        </script>
    </head>
    <body>
        <div id="Main" style="padding-left:150px; position: absolute; width: 800px;">
            <p style="font-size: 18pt; text-align: justify; padding-top: 200px; padding-left: 200px;">
            BERK was founded on the desire to remove the bureaucracy, complexity, and hidden agendas from consultancy.  When you deal with BERK, you’re dealing directly with the expertise, not a salesperson or a subcontracting agency. <br /> <br />

Our down-to-earth approach combined with extensive 'in the seat' supply chain expertise allows us to advise you on key supply chain evolution decisions, allowing you to maintain focus on managing your business. <br /> <br />

We have eliminated the green beans from our team so that we can establish sustainability in your team and at an affordable rate. 
            </p>
            <p style="text-align: right; font-size: 20pt;"> <strong>
...Securing the Last Piece® <br />
                <a href="http://www.linkedin.com/company/269236?trk=tyah" target="_blank"> <img src="http://berkllc.com/images/LinkedIn2.png" alt="Follow Us" style="float:right;" width="150px" /> </a>
            </strong> </p>
        </div>
        <div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;">
        <a href="index.html" style="padding-left:175px;"> <img src="http://berkllc.com/images/BERKPic1.jpg" alt="BERK" /> </a>
            <p style="font-size:11pt; padding-top:50px; ">
            <span style="font-family:'Copperplate Gothic Bold'; ">
            <a href="index.html" style="color: black; background-color:#F2E8DE; padding-left:93px; padding-right:88px; padding-top:8px; padding-bottom:8px"> Home </a> <br /> <br />
            <a href="BERKWhoWeAre.html" style="background-color:#1F497D; padding-left:62px; padding-right:62.5px; padding-top:8px; padding-bottom:8px"> Who We Are </a> <br /> <br />
            <a href="BERKWhatWeDo.html" style="background-color:#1F497D; padding-left:62px; padding-right:63px; padding-top:8px; padding-bottom:8px"> What We Do </a> <br /> <br />
            <a href="BERKWhoWeveHelped.html" style="background-color:#1F497D; padding-left:36px; padding-right:37px; padding-top:8px; padding-bottom:8px"> Who We've Helped </a> <br /> <br />
            <a href="BERKOurNetwork.html" style="background-color:#1F497D; padding-left:57.5px; padding-right:57px; padding-top:9px; padding-bottom:9px"> Our Network </a> <br /> <br />
             <a href="BERKWhatAreYouMissing.html" style="background-color:#1F497D; padding-left:23px; padding-right:22px; padding-top:8px; padding-bottom:8px">What Are You Missing </a> <br /> <br />
            <a href="BERKContactUs.html" style="background-color:#1F497D; padding-left:66px; padding-right:65px; padding-top:8px; padding-bottom:8px"> Contact Us </a> <br />
            </p>
            </span>
        </div>
        <div id="blank" style="width:100%; padding-top:1px;">
        </div>
        <div id="Legal1" style="background-color:#1F497D; position: absolute; padding-top:125px; width:994px; text-align:center;">
        <table id="Legal2" border="0" style="border-collapse:collapse; font-size:8pt; color:white; margin-left: auto; margin-right: auto;" cellpadding="10px">
            <tr>
                <th  style="cursor: pointer;" onclick="location.href='index.html'">
                Home
                </th>
                <th style="cursor: pointer;" onclick="location.href='BERKContactUs.html'">
                Contact Us
                </th>
                <th style="cursor: pointer;" onclick="location.href='BERKDisclaimers.html'">
                Legal Disclaimers
                </th>
                <th style="cursor: pointer;" onclick="location.href='BERKTrademark.html'">
                Trademark/Privacy
                </th>
                <th style="cursor: pointer;" onclick="location.href='BERKSitemap.html'">
                Site Map
                </th>
            </tr>
        </table>
        <p style="text-align:center; font-size:6pt; color:white;">
        © 2009 BERK Consulting, LLC. All Rights Reserved.
        </p>
        </div>

    </body>
</html>

【问题讨论】：

内联样式、无速记和表格。您不是偶然在 Word 中制作的吗？
Web 开发者的口头禅：“如果它在 IE 中有效，但在其他浏览器中无效，那么您的代码就是错误的。
我不是用 Word 写的。为什么？

标签： html google-chrome safari

【解决方案1】：

这是草率的，但添加

z-index: 900;position: relative;

到样式为：

<div id="Tabs" style="background-color:#502800; text-align:right; width:280px; padding-bottom:400px; padding-top:50px; padding-left:20px;z-index: 900;position: relative;">

并添加

z-index: 1;

到样式

<div id="Main" style="padding-left:150px; position: absolute; width: 800px;z-index: 1;">

在不相关的说明中，如果您想了解 html/css/javascript 的良好做法和样式，我建议您访问 this site 或 this site。

【讨论】：

我不推荐 w3Schools 来学习好的做法。请参阅：w3fools.com。
很公平。将 dev.opera 放在它前面。 w3schools 通常作为一个起点很好，所以我就把它留在那里。基于该标记，我认为 w3schools 不会受到伤害:-)
非常正确。 MDN 是另一个不错的资源 (developer.mozilla.org/en-US/docs/Web/HTML)，尽管几乎任何资源都确实有助于改进 OP 的代码。 :)
@CmdrMoozy 我对 w3schools 没有任何问题，尽管 w3fools 有话要说。
我相信它在过去几年里变得更好了，但我仍然非常认为 SE 和 MDN 等资源总体上更值得信赖。

【解决方案2】：

问题是您的“主要” div 覆盖了链接。就在我开始打字的时候，我被叫走了。无论如何，不要相信 IE 能做到这一点。首先信任 Chrome。

【讨论】：