Question

我在这里创建了一些html的模拟，由于某种原因，我的网站在safari上看起来与我希望它在chrome上看起来不同。在Chrome上它看起来是正确的，但在osx和手机上的safari上，它看起来有点偏离并且在随机空间中居中。我不知道如何制作它以便其他浏览器看起来像一个？

你可以在chrome win和safari osx（第一个图像镶边）http://imgur.com/Z3kYG&SYZkW?full中看到差异。我只是希望它看起来像在chrome上一样，但我无法弄清楚我的代码是什么问题。

<div id="right-preview"><div id="background1"><div id="contentarea">
                <h4 id="time">01:59 AM</h3><br/><h4 class="username">Enter a name..</h3><div id="conversation"><div class="gBoxTall">
                                    <div class="right">
                                        <p class="message"> Your mom and I are going to divorce next month.</p>
                                    </div>
                                    <div class="bottom">
                                        <div class="right"></div>
                                    </div>
                                 </div><div class="wBoxTall">
                                    <div class="right">
                                        <p class="message"> Why ? Call me please.</p>
                                    </div>
                                    <div class="bottom">
                                        <div class="right"></div>
                                    </div>
                                 </div><div class="gBoxTall">
                                    <div class="right">
                                        <p class="message"> I wrote Disney and this phone changed it.</p>
                                    </div>
                                    <div class="bottom">
                                        <div class="right"></div>
                                    </div>
                                 </div></div>
                        </div></div>

这也是我的CSS代码。

 * {
margin: 0;
padding: 0;
 }
 h1 a {
color: black;
text-decoration: none;
 }
 #background1 {
background-color:#09F;
height: 720px;
margin: 0px auto 0;
overflow: hidden;
position: relative;
width: 480px;
 }
 #background2 {
background-color:#09F;
height: 720px;
margin: 0px auto 0;
overflow: hidden;
position: relative;
width: 480px;
 }
 h4#time {
font-size: 18px;
text-align: center;
text-shadow: 0 -1px 0 #FFF;
padding-top: 4px;
 }
 .username {
    text-align: center;
text-shadow: 0 -1px 0 #000;
font-size: 26px;
color:#FFF;
padding-top: 5px;
 }
 #conversation {
padding-top: 15px;
 }
 h3#date {
color: #808080;
font: bold 26px Helvetica, Arial, sans-serif;
text-align: center;
 }
 p.message {
font: 22px/25px Helvetica, Arial, sans-serif;
 }
 .gBoxTall {
background-color:#0C0;
clear: both;
float: right;
margin-top: 15px;
max-width: 270px;
padding-left: 22px;
 }
 .gBoxTall .right {
background-color:#0C0;
 }
 .gBoxTall .right p {
margin-left: -5px;
padding: 8px 30px 0 0;
color:#000;
text-shadow: 0px 0px 0px;
 }
 .gBoxTall .bottom {
background-color:#0C0;
height: 20px;
margin: -10px 0 0 -22px;
 }
 .gBoxTall .bottom .right {
background-color:#0C0;
float: right;
height: 20px;
width: 43px;
 }
 .wBoxTall {
background-color:#999;
clear: both;
float: left;
margin-top: 15px;
max-width: 260px;
padding-left: 33px;
 }
 .wBoxTall .right {
background-color:#999;
 }
 .wBoxTall .right p {
margin-left: -5px;
padding: 8px 24px 0 0;
color:#000;
text-shadow: 0px 0px 0px;
 }
 .wBoxTall .bottom {
background-color:#999;
height: 20px;
margin: -10px 0 0 -33px;
 }
 .wBoxTall .bottom .right {
background-color:#999;
float: right;
height: 20px;
width: 27px;
 }
 #contentarea {
font-family: Helvetica, Arial, sans-serif;
height: 660px;
overflow: hidden;
 }

Answer 1

您的h4代码已被h3代码关闭 - 这是无效的。根据你的CSS，这行应该是：

<h4 id="time">01:59 AM</h4><br/><h3 class="username">Enter a name..</h3><div id="conversation"><div class="gBoxTall">

Chrome（Win）和Safari（OSX）看起来与我的html不同

1 个答案: