html - Chrome/Firefox 布局很棒 - Safari 出现故障 - 没有使用 float

Question

我有一个父 div (#trial) 和两个并排的内部 div (#wp & #wp1)。 #wp 由图像上方的 h1 显示 block 组成，然后在旁边有一个用于“试用”服务的小注册表单(这是一个元素网站，不是真实的)。

在 Chrome 和 Firefox 中，布局显示正确。我刚刚在 Safari 中意识到第二个 div 中断了。表单位于右侧，但在第一个 div 下方出现偏移。

这是我的 html:

<div id = "trial"> <!-- Register div -->
    <div id = "wp">
<h1 class = "COA">Make your home a SMART home.</h1>
    <img src = "images/homedim.png" alt = "HomeSmart">
        </div>
    <div id="wp1">
        <h2>Sign up NOW for a free 30-day trial.</h2>
        <form id = "register" method = "post">
            <fieldset>
                <div class = "required">
                    <label for = "fname">What is your first name?</label>
                    <input id = "fname" type = "text" placeholder = "first     name" required aria-required = "true">
                </div>
            </fieldset>
            <fieldset>
                <div class = "required">
                    <label for = "lname">What is your last name?</label>
                    <input id = "lname" type = "text" placeholder = "last name" required aria-required = "true">
                </div>
            </fieldset>
            <fieldset>
                <div class = "required">
                    <label for = "email">Your email address</label>
                    <input id = "email" name = "email" type = "email" placeholder = "user@mydomain.com" required aria-required = "true">
                </div>
            </fieldset>
            <fieldset>
                <div class = "required">
                    <label for = "email1">Re-type your email address</label>
                    <input id = "email1" name = "email" type = "email" placeholder = "user@mydomain.com" required aria-required = "true">
                </div>
            </fieldset>
            <p>You will receive an email to confirm your trial.</p>
            <fieldset>
                <div class= "submit">
                    <p>
                        <input class="submit_btn" name="submit" type="submit" value="Sign Up" onclick="submit();" />
                    </p>
                </div>
            </fieldset>
        </form>
    </div>
</div> <!--End of Register Div -->

css如下:

/*Beginning of bottom half for welcome page*/
#trial{
    margin-top: 1.625em;
    display: flex;
    overflow: hidden;
}
#trial h1 {
    text-align: left;
    margin-left: 1.250em;
    margin-top: 1em;
    display: inline-block;
    /*width: 100%;*/
    height: 1.563em;
}
#wp{
    display: inline-block;
    margin-left: 1.250em;
}
#wp1{
    margin-right: 1.875em;
    margin-top: 1.875em;
}
#wp1 h2{
    /*width: 100%;*/
    text-align: right;
}
#wp1 form{
    text-align: right;
   /* width: 100%;*/
    display: inline-block;
    margin-right: 1.250em;
}
#wp1 .submit_btn{
    display: inline-block;
    color: #000;
    width:43%;
    height: 2.5em;
    font-size:1em;
    font-weight: bold;
    margin-left: 1.250em;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    background: #c87346; /* Old browsers */
    background: -moz-linear-gradient(top,  #c87346 0%, #f4ba52 100%); /*   FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c87346), color-stop(100%,#f4ba52)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #c87346 0%,#f4ba52 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #c87346 0%,#f4ba52 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #c87346 0%,#f4ba52 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #c87346 0%,#f4ba52 100%); /* W3C */
}
#wp img, #wp h1 {
    width: 50%;
    text-align: left;
    display: block;
    height: auto;
    margin-left: 1.250em;
    margin-top: .938em;
}
/*end of bottom half of welcome page #trial*/

任何建议(和批评)将不胜感激，这样我就可以在所有三种浏览器中正确显示吗？ (即使是与具体问题无关的非关联事物)。
如果我的图片上传，safari图片是我刚才注释掉后的 width: 100%;它将 div 拉到 safari 的中心，但在 Chrome 和 Firefox 中，一切都很好。

提前谢谢你。

由于没有足够的代表，我无法上传图片，但可以在这里看到 Project

我再次感谢任何建议和意见。

2015 年 5 月 8 日更新我能够通过添加 float:left; 来解决我的问题。到最左边的 div 和父容器。一些边距调整和 css 清理，一切正常。

#trial{
    margin-top: 1.625em;
    display: block;
    overflow: hidden;
}

#wp{
    display: inline-block;
    margin: 0 auto;
    float: left;

}
#wp h1 {
    width: 45%;
    text-align: left;
    display: block;
    height: auto;
    margin-left: 50px;
    margin-top: .938em;
}
#wp img {
    float: left;
    width: 45%;
    margin-top: 1.25em;
    margin-left: 50px;
}
#wp1{
   margin-right: 1em;
   margin-top: 1.875em;
}
#wp1 h2{
    text-align: right;
    margin-right: 1em;
}
#wp1 form{
   text-align: right;
   display: inline-block;
   margin-right: 1.250em;
}
#wp1 .submit_btn{
    display: inline-block;
    color: #000;
    width:43%;
    height: 2.5em;
    font-size:1em;
    font-weight: bold;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    background: #c87346; /* Old browsers */
    background: -moz-linear-gradient(top,  #c87346 0%, #f4ba52 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c87346), color-stop(100%,#f4ba52)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #c87346 0%,#f4ba52 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #c87346 0%,#f4ba52 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #c87346 0%,#f4ba52 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #c87346 0%,#f4ba52 100%); /* W3C */

认为这可以在没有 float 的情况下完成。

Answer 1

更新 5/8/2015 我能够通过添加 float:left; 来解决我的问题；到最左边的 div 和父容器。一些边距调整和 css 清理，一切正常。没有 float 就可以完成的想法太多了。

#trial{
margin-top: 1.625em;
display: block;
overflow: hidden;
}

#wp{
display: inline-block;
margin: 0 auto;
float: left;

}
#wp h1 {
width: 45%;
text-align: left;
display: block;
height: auto;
margin-left: 50px;
margin-top: .938em;
}
#wp img {
float: left;
width: 45%;
margin-top: 1.25em;
margin-left: 50px;
}
#wp1{
 margin-right: 1em;
 margin-top: 1.875em;
}
#wp1 h2{
text-align: right;
margin-right: 1em;
}
#wp1 form{
text-align: right;
 display: inline-block;
 margin-right: 1.250em;
}
#wp1 .submit_btn{
    display: inline-block;
    color: #000;
width:43%;
height: 2.5em;
font-size:1em;
font-weight: bold;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
background: #c87346; /* Old browsers */
background: -moz-linear-gradient(top,  #c87346 0%, #f4ba52 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c87346), color-stop(100%,#f4ba52)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c87346 0%,#f4ba52 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c87346 0%,#f4ba52 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c87346 0%,#f4ba52 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c87346 0%,#f4ba52 100%); /* W3C */