我有一个父div(#trial(，有两个内部div(#wp和#wp1(并排。 #wp由图像上方的 h1 显示块组成，然后在侧面有一个用于"试用"服务的小注册表单(这是一个项目网站，不是真实的东西(。
在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*/
任何建议(和批评(将不胜感激，以便我可以在所有三个浏览器中正确显示它？ (即使是与具体问题无关的非关联事物(。
如果我的图片上传，野生动物园图片是在我刚才注释掉宽度之后：100%;这在 Safari 中将div 拉到了中心，但在 Chrome 和 Firefox 中，一切都很好。
提前谢谢你。
由于没有足够的代表，我无法上传图像，但可以在这里看到项目
我再次感谢任何建议和意见。
更新 5/8/2015我能够通过添加 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 */
这么多，认为这可以在没有浮标的情况下完成。
更新 5/8/2015 我能够通过添加 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 */