Question

这是我的网站：rickymason.net/blurbs

如果您在chrome中查看它，您会看到右侧的AJAX正确加载，并且CSS正确地格式化它。

在Firefox中，它是一个不同的故事。我玩过它，但找不到问题。

这是我的模板（divs）：

<html>
<head><?php echo $head; ?></head>
<div id="wrapper">
    <div id="topnav"><?php echo $topnav; ?></div>
    <div id="leftbar">
        <?php echo $logo; ?>
        <img src="<?php echo $profile['avatar_loc']['location'] ?>" alt="avatar_user"/>
        <div id="select"> 
            <?php echo $create; ?>
            <div id="filter_select"><?php echo $category; ?></div>
            <div id="addfilter"><?php echo $addfilter; ?></div>
        </div>
    </div>
<div id="boardwrapper"> 
    <div id="boardborder">
        <div id="board" alt="Welcome to Blurb!"><img src="img/board/loading.gif" alt="loading"/></div>
    </div>
    <div id="boardbot"></div>
</div>
<footer>
    <?php echo $footer; ?>
</footer>
</body>
</div>
</html>

这是我的CSS

.board {
    display: table;
    padding-left: 35px;
    padding-top: 10px;
}

.board #row {
    padding-bottom: 15px;
}

.board #author p {
    position: absolute;
    top: inherit;
    padding-left: 3px;
    padding-top: 53px;
    color: white;
    font: 16px Tahoma, Helvetica, Arial, Sans-Serif;
    text-align: center;
    text-shadow: 0px 2px 3px #555;
}

.board #author {
    display: table-cell;
    border: 1px solid #97cae6;
    width: 75px;
    height: 75px;
}

.board #arrow {
    background-image: url('../img/board/corner.jpg');
    display: table-cell;
    width: 35px;
    height: 75px;
}

.board #subject {
    position: relative;
    max-height: 75px;
    display: table-cell;
    width: 653px;
    max-width: 653px;
    height: 75px;
    border-top: 1px solid #97cae6;
    border-bottom: 1px solid #97cae6;
}

.board #subject a {
    position: absolute;
    top: inherit;
    padding-top: 18px;
}

.board #info {
    display: table-cell;
    width: 180px;
    height: 75px;
    border-top: 1px solid #97cae6;
    border-bottom: 1px solid #97cae6;
    border-right: 1px solid #97cae6;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

希望有些东西会向你跳出来，你可以提供帮助！谢谢！

Answer 1

在 board.css 文件中，更改此内容：

.board #arrow {
background-image: url('../img/board/corner.jpg');
display: table-cell;
width: 35px;
height: 75px;

}

到此：

.board #arrow {
background: url('../img/board/corner.jpg') no-repeat;
display: table-cell;
width: 35px;

}

应该解决你的问题。

JA

CSS浏览器兼容性 - 嵌套的Div和位置

1 个答案: