gpt4 book ai didi

html - 渲染(错误)显示 : table-cell;

转载 作者:太空宇宙 更新时间:2023-11-04 11:08:29 25 4
gpt4 key购买 nike

我目前在一个网站上工作。 HTML 文件的 header 如下所示:

<div id="page">
<header>
<a href="#" class="redsquare">&nbsp;</a>
<div class="head-wrapper">
<!-- some more -->
</div>
<div class="flags-container">
<!-- some more -->
</div>
</header>

此 html 部分的 css 如下所示:

#page {
width: 100%;
display: table;
clear: both;
margin-bottom: 30px;
}

header {
width: 100%;
height: 223px;
background: #F0F0F0 url("../resources/header-background.png") repeat-x;
margin: 0;
padding: 0;
display: table-row;
clear: both;
}

header > a.redsquare {
background-image: url("../resources/logo-figure.png");
float: left;
height: 223px;
width: 240px;
margin: 0px;
padding: 0px;
display: table-cell;
vertical-align: top;
}

header > .head-wrapper {
height: 223px;
margin: 0;
padding: 0;
display: table-cell;
vertical-align: top;
}

header > .flags-container {
width: 110px;
height: 100px;
padding: 20px 5px 20px 5px;
margin-bottom: 83px;
float: right;
display: table-cell;
vertical-align: top;
clear: both;
}

所有元素都在它们的位置上,但是在 redsquarehead-wrapper 之间以及在 head-wrapperflags-container有一条小线(如下图所示)

enter image description here

我的问题是,我怎样才能防止这种情况发生?

最佳答案

我采用了您发布的标记和 css 并做了一个 fiddle ,因为表格的默认行为是用边框分隔单元格,您需要通过添加来覆盖它

border-collapse: collapse;

给你#page 元素。

enter image description here

在 IE 和 Chrome 中快速测试,fiddle can be found here

但是 我非常同意其他评论,因为您不应该使用表格,或者出于设计原因模拟表格,相反我建议使用相同的 html 结构而不是

display: table-cell;

尝试使用

display: inline-block;

这将导致相同的“列”效果,但不那么悲惨。表格是悲剧性的。

关于html - 渲染(错误)显示 : table-cell;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33789727/

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