Firefox + IE，在Chrome上工作时不要使用Picture Html，CSS

时间：2016-11-06 19:59:48

标签： html css google-chrome internet-explorer firefox

做错事情就好了。 我想将我的徽标放在我的网站上，并将网站标题作为图片放在旁边。但是我的“headerlogo.png”在Firefox和IE中不会与“高度”重新混合，只有在Chrome工作中...不知道为什么...... 想要放置一些截图，但没有奏效......

所以该网站已经在线。你可以访问它Click HERE。 所以这是我的home.html的代码我正在研究和测试，并将最终的代码复制到其他页面，所以不关心它们... 仅限于home.html

以下是home.html和我的style.css的代码：

body {
    background-color: #222;
}

header {
    background-color: #000;
    color: #FFF;
    font-weight: bolder;
}

table {
    border-style: none;
}

.headerlogo {
    height: 7%;
    margin-left: 2%;
    margin-bottom: 2%;
    margin-top: 2%;
}

.headerpic {
    padding-left: 9%;
    margin-bottom: 2%;
    margin-top: 2%;
    width: auto;
    height: 100%;
}

.navpic {
    width: 17%;
    float: left;
    background-color: #000;
    margin-right: 3%;
    margin-bottom: 0.2%;
    box-shadow: 5px 0px 10px black;
}

.nav {
    list-style-type: none;
    background-color: #000;
    margin-top: -1%;
}

.navpic:hover {
    background-color: #111;
}

hr.bottom {
    margin-bottom: 2%;
}

div.articletd {
    background-color: #111;
    color: #FFF;
    width: 640px;
    height: 400px;
    font-family: sans-serif;
    float: left;
    margin-top: -3px;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 2%;
}

td.normalarticle {
    background-color: #111;
    color: #FFF;
    font-family: sans-serif;
    text-align: left;
    vertical-align: top;
    padding-left: 2%;
    padding-right: 2%;
    line-height: 1.6;
    height: auto;
    width: 49.5%;
}

table.normalarticleeinseitig {
    background-color: #111;
    color: #FFF;
    font-family: sans-serif;
    text-align: left;
    vertical-align: top;
    padding-left: 2%;
    padding-right: 2%;
    line-height: 1.6;
    height: auto;
    width: 100%;
    ;
    border: 0 solid #222;
    ;
}

table.normalarticle {
    width: 100%;
    line-height: 1.6;
    border: 0 solid #222;
    ;
}

.middlearticle {
    width: 1%;
    background-color: #222;
}

.kontaktformularrechts {
    margin-left: 20%;
}

.buttonformular {
    background-color: #111;
    color: #FFF;
    border-width: medium;
}

h1 {
    font-size: 2em;
    margin-top: 2%;
    text-align: left;
}

p.ptd {
    line-height: 1.6;
    text-align: left;
    padding-left: 2%;
}

.spotifylink {
    width: 4%;
    height: 4%;
}

a.spotifylink:hover {
    background-color: #FFF;
}

.footer {
    background-color: #000;
    margin-top: 1%;
    color: #FFF;
}

.footerp {
    margin-left: 5%;
    font-family: sans-serif;
}

.footertd {
    width: 100%;
}

footer td {
    width: 7.5%;
    text-align: center;
}

footer img {
    margin-top: -20%
}

.recht {
    margin-top: 1%;
    background-color: #111;
    color: #FFF;
    font-family: sans-serif;
}

.impressumtable {
    width: 37.5%;
    margin-left: 3.5%;
}

.impressumtd {
    text-align: left;
}

a {
    text-decoration: none;
}

a:link {
    color: #FFF;
}

a:visited {
    color: #FFF;
}

a:active {
    color: #FFF;
}

a:hover {
    color: #AAA;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="shortcut icon" type="image/x-icon" href="bilder/favicon.png">
    <title>DJ Dre Loo</title>

</head>

<body>
    <header>
            <table>
              <tr>
                <td >
                      <img class="headerlogo" src="bilder/headerlogo.png">
                </td>
                <td class="headerpic">
                    <img src="bilder/headertitle.png">
                </td>
              </tr>
            </table>

    </header>
    <hr>
    <nav>
        <div>
            <ul class="nav">
                <li class="navfirst">
                    <a href="home.html"><img class="navpic" src="bilder/home.png"></a>
                </li>
                <li>
                    <a href="biografie.html"><img class="navpic" src="bilder/biografie.png"></a>
                </li>
                <li>
                    <a href="djing.html"><img class="navpic" src="bilder/djing.png"></a>
                </li>
                <li>
                    <a href="kontakt.html"><img class="navpic" src="bilder/kontakt.png"></a>
                </li>
                <li>
                    <a href="td.html"><img class="navpic" src="bilder/td.png"></a>
                </li>
            </ul>
        </div>
        <hr class="bottom">
    </nav>

    <article>
        <table class="normalarticleeinseitig">
            <tr>
                <td>
                    <div style="height:10px;font-size:10px;"></div>
                    <div align="center">
                        <img width="100%" src="bilder/eingebunden/Homepic.png">
                    </div>
                </td>
            </tr>
        </table>
    </article>
    <hr height="0px" color="#222">
    <footer>
        <div class="footer">
            <table class="footertd">
                <tr>
                    <td>
                        <p class="footerp">
                            <a href="https://www.facebook.com/djdreloo/">Facebook</a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="mailto:your.dj.dreloo@gmail.com">Email</a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="https://www.instagram.com/dreloo/">Instagram</a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="https://twitter.com/djdreloo">Twitter</a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="https://open.spotify.com/user/andreschuele">Spotify</a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="http://www.mixcrate.com/djdreloo">Mixcrate</a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="https://www.mixcloud.com/DJ_DRE_LOO/">Mixcloud</a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="https://www.facebook.com/djdreloo/">Mixify</a>
                        </p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p class="footerp">
                            <a href="https://www.facebook.com/djdreloo/"><img width="25%" src="bilder/facebooklogo.png"></a>
                        </p>
                    </td>

                    <td>
                        <p class="footerp">
                            <a href="mailto:your.dj.dreloo@gmail.com"><img width="30%" class="linklogos" src="bilder/maillogo.png"></a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="https://www.instagram.com/dreloo/"><img width="25%" class="linklogos" src="bilder/instagramlogo.png"></a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="https://twitter.com/djdreloo"><img width="25%" class="linklogos" src="bilder/twitterlogo.png"></a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="https://open.spotify.com/user/andreschuele"><img width="25%" class="linklogos" src="bilder/spotifylogo.png"></a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="http://www.mixcrate.com/djdreloo"><img width="25%" class="linklogos" src="bilder/mixcratelogo.png"></a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="https://www.mixcloud.com/DJ_DRE_LOO/"><img width="30%" class="linklogos" src="bilder/mixcloudlogo.png"></a>
                        </p>
                    </td>
                    <td>
                        <p class="footerp">
                            <a href="https://open.spotify.com/user/andreschuele"><img width="45%" class="linklogos" src="bilder/mixifylogo.jpg"></a>
                        </p>
                    </td>
                </tr>

            </table>
        </div>
        <div class="recht">
            <table class="impressumtable">
                <tr>
                    <td class="impressumtd">
                        <a href="Impressum.html">Impressum</a>
                    </td>
                    <td class="impressumtd">
                        <a href="Disclaimer.html">Disclaimer</a>
                    </td>
                    <td class="impressumtd">
                        <a href="selber.html">(*)Warum...</a>
                    </td>

                </tr>
            </table>
        </div>
    </footer>

</body>

</html>

也许你可以帮助我:)

2 个答案:

答案 0 :(得分：0)

您是否尝试过将兼容性添加到CSS文件（如-WebKit-和-moz-）到图像？

答案 1 :(得分：0)

问题在于表格元素，当我在我的Firefox浏览器上查看时，网站不可见，就像我在Chrome上查看一样。

更好地删除表并使用html float属性

http://www.w3schools.com/cssref/pr_class_float.asp

相关问题
最新问题