Question

到目前为止，我有一个网站在谷歌浏览器中完美显示，但在其他浏览器，如IE，Firefox和Safari，网站布局和图像变得非常扭曲。该网站的原始结构应如下所示：彩色部分覆盖整个屏幕，在sneg中有一个svg图像，覆盖整个屏幕的白色部分然后重复约4次。然而，在Internet Explorer和Firefox上，图像放大占据整个屏幕，彩色部分开始占据整个场景。在safari上，布局显示正常，但是我的svg图像以奇怪的比例显示，这些比例太拉伸或太小。这可能会令人困惑，所以我在下面包含了一个jfiddle和我的代码。我知道我有一个奇怪的问题，我认为大部分是由于我如何设置ym svg但我找不到解决方案。感谢任何帮助！

Jfiddle：http://jsfiddle.net/hC2nX/

HTML：

<body>
    <div id="header">
        <div id="headerContent">
            <a href="#"><img src="images/logo-12.svg" width="155px" height="70px"/></a>
            <div id="navLinks">
                <nav id="list">
                    <div id="homeLink" style="background-color:#ff837b;" class="link"><a href="#" class="listLink">Home</a></div>
                    <div id="storyLink" class="link"><a href="#" class="listLink">Story</a></div>
                    <div id="workLink" class="link"><a href="#" class="listLink">Work</a></div>
                    <div id="contactLink" class="link"><a href="#" class="listLink">Contact</a></div>
                </nav>
            </div>
        </div>   
    </div>

        <div id="induoIntro" class="divide">
            <div class="graphic" style="background-color:#ff837b">
                <p><img src="images/WAInduo-02.svg" style="width:50%; height:85%;" /></p>
            </div>

            <div class="textBody">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus  </p>   
            </div>
        </div>

        <div id="designers" class="divide">                 
            <div class="graphic" style="background-color:#FFB37B">
                <p><img src="images/WAdesign-03.svg" style="width:50%; height:85%;" /></p>
            </div>

            <div class="textBody">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>   
            </div>
        </div>

        <div id="developers" class="divide">
            <div class="graphic" style="background-color:#CEE28F">
                <p><img src="images/WAdevelop-04.svg" style="width:50%; height:85%;" /></p>
            </div>

            <div class="textBody">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>   
            </div>
        </div>

        <div id="directors" class="divide">
            <div class="graphic" style="background-color:#C195DA">
                <p><img src="images/WAdirect-05.svg" style="width:50%; height:85%;" /></p>
            </div>

            <div class="textBody">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut posuere mauris. Nulla faucibus consectetur mi, nec luctus eros vulputate non. Cras id suscipit metus </p>   
            </div>
        </div>

    <div id="footer">

    </div>
</body>

CSS：

html {
    height:100%
}

body {
    background-color:#f4f4f4;
    height:100%
}


#header {
    position:absolute;
    height:70px;
    top:0;
    width:100%;
    background-color:#fff;
}

#headerContent {
    width:80%;
    margin:auto;
}

#list {
    position:relative;
    font-family: 'Dosis', sans-serif;
    font-weight:300;
    color: #474747;
    top:-73px;
    float:right;
}

#list a {
    color:#000;
    text-decoration:none;
    font-size:18px;
    width:70px;
    height:70px;
    text-align: center; 
    line-height: 70px;
    display:block;
}

#list a:visited {
    color:#000;
    text-decoration:none;
    font-size:18px;
    width:70px;
}

.link {
    display:inline-block;
    -webkit-transition: background .8s;
    -moz-transition: background .8s;
    -ms-transition: background .8s;
    -o-transition: background .8s;
    transition: background .8s;
}

#homeLink:hover {
    background-color:#ff837b;
}

#storyLink:hover {
    background-color:#FFB37B;
}

#workLink:hover {
    background-color:#CEE28F;

}

#contactLink:hover {
    background-color:#C195DA;
}
#wrap {
    height:100%;
}

.divide {
    height:200%;
}

.graphic {
    display:table; 
    height:50%;
    width:100%;

}

.graphic p {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

.textBody {
    display:table; 
    height:50%;
    width:85%;
    margin:auto;
}

.textBody p {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    font-family: 'Dosis', sans-serif;
    font-size:45px;
    margin:auto;
}

#footer {
    height:70px;
    width:100%;
    background-color:#252a33;
}

svg和％height在几个浏览器中搞乱了布局

0 个答案: