Html svg和%height在几个浏览器中把布局搞得一团糟_Html_Css_Svg_Css Position

Html svg和%height在几个浏览器中把布局搞得一团糟

html css svg

Html svg和%height在几个浏览器中把布局搞得一团糟,html,css,svg,css-position,Html,Css,Svg,Css Position,到目前为止，我有一个网站在谷歌chrome上显示得非常完美，但在IE、Firefox和Safari等其他浏览器上，网站布局和图像都会被扭曲。网站的原始结构应该是这样的：一个彩色部分覆盖整个屏幕，屏幕上有一个svg图像，一个白色部分覆盖整个屏幕，然后重复大约4次。然而，在InternetExplorer和firefox上，图像放大到占据整个屏幕，彩色部分开始占据比整个屏幕更多的空间。在safari上，布局显示很好，但我的svg图像显示的比例很奇怪，要么太长，要么太小。这可能会让人困惑，所以我在下面

到目前为止，我有一个网站在谷歌chrome上显示得非常完美，但在IE、Firefox和Safari等其他浏览器上，网站布局和图像都会被扭曲。网站的原始结构应该是这样的：一个彩色部分覆盖整个屏幕，屏幕上有一个svg图像，一个白色部分覆盖整个屏幕，然后重复大约4次。然而，在InternetExplorer和firefox上，图像放大到占据整个屏幕，彩色部分开始占据比整个屏幕更多的空间。在safari上，布局显示很好，但我的svg图像显示的比例很奇怪，要么太长，要么太小。这可能会让人困惑，所以我在下面包含了一个jfiddle和我的代码。我知道我遇到了一个奇怪的问题，我想大部分问题都是由于我如何设置ym svg造成的，但我找不到解决方案。感谢您的帮助，谢谢

Jfiddle：

Html:

到SVG文件的链接不幸被破坏。你能顺便修复其中一个吗？@eithedog很遗憾，我现在无法将svg上传到其他地方，但即使svg损坏，问题仍然是一样的。我认为问题在于style=width:50%；身高：85%；在img上-没有它们，图像不会将文本推送到自己的容器之外，浏览器之间的行为是一致的。这就是你想要的吗？如果图像需要是容器高度/宽度的x，则需要应用最大高度、最大宽度：Ghh。。。这是我在控制台而不是小提琴中编辑东西的时候。。抱歉-这里的正确链接：如果您希望图像大小均匀，但覆盖整个可能的空间背景大小：contain；这就是你想要的。否则，您可以控制图像大小的百分比背景大小：50%50%，等等

<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>

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