昨天我發現了 Chrome 和 Edge 的布局問題，它沒有出現在三星互聯網瀏覽器中，而且以前不存在。該問題僅在使用列時出現。這是我的CSS：
.div_columns {
width:500px;
column-count: 2;
column-gap: 20px;
}
.card {
height: 32px;
padding: 5px;
background-color: #f0f0f0;
margin-bottom: 8px;
}
.div_buttons {
position: relative;
height: 34px;
min-width: 50px;
float: right;
text-align: right;
background-color: #808080;
padding-top: 18px;
box-sizing: border-box;
}
.button {
position: absolute;
right: 1px;
top: 1px;
width: 16px;
height: 16px;
background-color: #f3f3f3;
}
這是我的 HTML：
<div class="div_columns">
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
<div class="card"><div class="div_buttons"><div class="button"></div></div></div>
</div>
輸出看起來像這樣，你可以看到似乎只有一個按鈕而不是四個。但他們似乎都處于相同的位置。就像我一開始說的，這個問題似乎與瀏覽器和列的使用有關。那么這里有什么問題呢？
我想提的另一個煩人的事情是，當我使用 Microsoft Edge 的開發人員工具 (F12) 并想通過右鍵單擊復制 CSS 規則時，開發人員工具隨后會關閉。這在 Edge 之前沒有發生過，Chrome 也沒有發生過。
uj5u.com熱心網友回復：
display:inline-block通過添加到div_columns類中，我成功地將這些按鈕恢復到常規位置。
至于復制規則問題，我也在我的開發工具中找到了。我得到的唯一結論是，如果您在大括號內右鍵單擊{}，背景關系選單如下所示。此處的“復制規則”選項按預期作業：
但是，如果您在大括號外單擊滑鼠右鍵，背景關系選單會發生如下變化。這里的“復制規則”選項會導致 devtools 崩潰（實際上這里的任何選項都會導致崩潰）。但更有趣的是樣式規則仍然會在您的剪貼板上。所以我建議通過在 Edge 中按Shift Alt I向 Edge 團隊發送反饋：
uj5u.com熱心網友回復：
在這種情況下，我會嘗試禁用position relative position absoluteand float right，然后在按鈕內寫一些東西
我會禁用一切，直到我發現問題所在
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/489049.html