gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:43:49 24 4
gpt4 key购买 nike

这是我的网站: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;
}

希望您突然想到什么,您可以提供帮助!谢谢!

最佳答案

在文件 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

关于html - CSS 浏览器兼容性 - 嵌套的 Div 和位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10934343/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com