I have a table that seems to be rendering differently between Chrome and Firefox. The Chrome output is correct, and the Firefox output isn't.
body {
background-color: #e1e1e1;
word-wrap: break-word
}
#about-table {
margin: 0 auto;
}
.panel {
background-color: #f5f5f6;
border-radius: 4px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
color: #1c1c1c;
margin: 16px;
padding: 32px;
text-align: center;
}
.person {
display: inline;
}
.portrait {
width: 100%;
}
.portrait-container {
max-width: 256px;
width: 50%;
}
.portrait-label {
font-weight: 600;
width: 128px;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
<link rel="stylesheet" href="/lib/index2.css" />
</head>
<body>
<div class="panel">
<table id="about-table">
<tr class="person">
<td class="portrait-container"><img class="portrait" src="/img/head-julian.jpg" /></td>
<td class="portrait-label">Person 1</td>
</tr>
<tr class="person">
<td class="portrait-container"><img class="portrait" src="/img/head-simon.jpg" /></td>
<td class="portrait-label">Person 2</td>
</tr>
<tr class="person">
<td class="portrait-container"><img class="portrait" src="/img/head-jacob.jpg" /></td>
<td class="portrait-label">Person 3</td>
</tr>
</table>
</div>
</body>
On Firefox (and Edge), the third item in the table always gets put on its own line, regardless of how much horizontal space there is.
答案 0 :(得分:2)
将display: inline;
应用于表行(通过类.person
)实际上没有任何意义-您可以使用DIV并根据CSS对其进行应用,也可以使用“真实”表(即HTML表元素,例如table
,tr and
td`,就像没有该CSS规则一样)。
其他所有内容,即默认表布局属性和不同CSS display
定义的每个“混合”,都取决于浏览器的容忍度/解释。但是我对此表示怀疑(即tr
标签及其display: inline
定义)是否是“本地” HTML布局属性和CSS的有效组合。
例如,我将在DIV上使用flexbox属性,而不是如下所示的所有非真实表元素:
body {
background-color: #e1e1e1;
word-wrap: break-word
}
#about-table {
display: flex;
justify-content: center;
}
.panel {
background-color: #f5f5f6;
border-radius: 4px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
color: #1c1c1c;
margin: 16px;
padding: 32px;
text-align: center;
}
.person {
display: flex;
width: 30%;
align-items: center;
}
.portrait {
width: 100%;
}
.portrait-container {
max-width: 256px;
width: 50%;
}
.portrait-label {
font-weight: 600;
width: 128px;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
<link rel="stylesheet" href="/lib/index2.css" />
</head>
<body>
<div class="panel">
<div id="about-table">
<div class="person">
<div class="portrait-container"><img class="portrait" src="/img/head-julian.jpg" /></div>
<div class="portrait-label">Person 1</div>
</div>
<div class="person">
<div class="portrait-container"><img class="portrait" src="/img/head-simon.jpg" /></div>
<div class="portrait-label">Person 2</div>
</div>
<div class="person">
<div class="portrait-container"><img class="portrait" src="/img/head-jacob.jpg" /></div>
<div class="portrait-label">Person 3</div>
</div>
</div>
</div>
</body>