在某些浏览器中,文字出现在图像上方

时间:2014-02-18 18:28:41

标签: css

这是我的HTML:

<div class="recipeblock clearfix">
    <img src="img/ph_recipes-001.jpg" />
    <h1>Pineapple Cola Ham</h1>
    <p>Lorem ipsum master walkie havenport.</p>
    <div class="recipebottom">

<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium" g:plusone:count="false"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal" pi:pinit:url="http://www.addthis.com/features/pinterest" pi:pinit:media="http://www.addthis.com/cms-content/images/features/pinterest-lg.png"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4e45294b7aa0c81e"></script>

        <table>
            <tr>
                <th>PREP</th>
                <th>COOK</th>
                <th>READY IN</th>
            </tr>
            <tr>
                <td>10min</td>
                <td>30min</td>
                <td>40min</td>
            </tr>
        </table>
    </div>
</div>

以下是相关的CSS:

div.recipeblock{position:relative;margin-bottom:30px;}
div.recipeblock img{float:left;margin-right:30px;}
div.recipebottom{position:absolute;left:363px;bottom:0;}

table{font-family:franklin_gothic_fsMdCn;text-align:center;}
table th{width:100px;color:#eedda6;background-color:#977e50;font-weight:normal;}
table th{padding:2px 0 1px 0;font-size:0.9em;border-right:1px solid #fff;}
table th:first-child{border-left:1px solid #977e50;}
table th:last-child{border-right:1px solid #977e50;}
table td{width:100px;padding:6px 0 3px 0;color:#977e50;font-size:1.3em;border-left:1px solid #977e50;border-bottom:1px solid #977e50;}
table td:last-child{border-right:1px solid #977e50;}

标题菠萝可乐火腿(H1标签)应漂浮在照片的右侧。我已在六种不同的浏览器(Windows和Macintosh)中对此进行了测试。

然而,我的客户端正在查看以下屏幕截图中的内容,标题超出了图像。他正在使用相同的浏览器(MacBook Pro上的Safari)。他已经对浏览器进行了几次硬刷新,但仍然看到了这一点。我无法复制这个问题!

我不知道是什么导致这种情况,我真的很感激任何人的建议。谢谢!

screenshot

0 个答案:

没有答案