這是帶有示例代碼的片段：
table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
padding: 3px 6px;
}
[contenteditable]:empty:not(:focus)::before {
content: attr(data-placeholder);
color: gray;
font-size: .9rem;
}<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true" data-placeholder="Firstname"></td>
<td contenteditable="true" data-placeholder="Lastname"></td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>在 Chrome 和 Safari 中，它幾乎可以正常作業：
出于某種原因，在 Firefox中，contenteditabletds 沒有得到占位符：
我該如何解決這個問題？
編輯：似乎這個問題:empty比[contenteditable]這段代碼更有效：
[contenteditable]:not(:focus)::before {
content: attr(data-placeholder);
color: gray;
font-size: .9rem;
}
但是隨后始終顯示占位符，因此不再是實際的“占位符”。
uj5u.com熱心網友回復：
Firefox 不兼容td:empty不是因為 css 引擎有問題，而是因為 Firefox 處理的方式contenteditable是在區域中添加br標簽。
另一種方法是更改?? html 以在內容存在時使用inputs您。disable
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid gray;
padding: 0;
}
table input {
border: none;
}
[placeholder] {
color: gray;
font-size: .9rem;
}<table>
<thead>
<tr>
<th>Forename</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
<tr>
<td><input placeholder="Forename"></td>
<td><input placeholder="Surname"></td>
</tr>
<tr>
<td><input placeholder="Forename" value="John" disabled></td>
<td><input placeholder="Forename" value="Doe" disabled></td>
</tr>
</tbody>
</table>uj5u.com熱心網友回復：
正如@DreamTeK 提到的，Firefox 似乎<br>在空 contenteditable元素中添加了一個。他的回答，使用input代替contenteditable 是有效的。
如果你別無選擇，只能使用contenteditable，這里有一個JS 中的修復來洗掉這個不需要的 br：
// VanillaJS
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('[contenteditable]').forEach((elt) => {
if (elt.children.length === 1 && elt.firstChild.tagName === "BR") {
elt.firstChild.remove();
}
})
});
// jQuery
/*
$(document).ready(() => {
$('[contenteditable]').each((_, elt) => {
if ($(elt).children().length === 1 && $(elt).has('br')) {
$(elt).html('');
}
});
});
*/table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
padding: 3px 6px;
}
[contenteditable]:empty:not(:focus)::before {
content: attr(data-placeholder);
color: gray;
font-size: .9rem;
}<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true" data-placeholder="Firstname"></td>
<td contenteditable="true" data-placeholder="Lastname"></td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/512349.html
標籤：css火狐内容可编辑