Safari 中的垂直對齊有奇怪的行為

Question

我目前正在編寫一個程序，其中我需要兩個 div，其中包含一個日志和一個 output。 將元素添加到日志時，div 會嘗試以奇怪的方式對齊（它們上下移動以嘗試匹配其他 div 的文本）。

為了解決這個問題，我添加了vertical-align:top; 到 div 的 class。 這在 Chrome 中效果很好，但在 Safari 中根本不行。 有時在 Safari 中，div 只會復制自己，這真的很奇怪。

這是一個演示該問題的代碼筆。 任何幫助表示贊賞。 謝謝！

我正在使用 macOS 10.14.5 和 Safari 版本 12.1.1。

Answer 1

Safari 沒有為<code>元素定義display屬性。 您可以簡單地添加

code { display: block; }

根據您的風格，它應該可以工作。

我希望我確實正確理解了您的問題。

 var log = document.getElementById("div-1"); var output = document.getElementById("div-2"); console.log(log); function addTo(where) { let msg = document.createElement("code"); let lb = document.createElement("br"); msg.textContent = "\n This is text."; where.insertBefore(lb, where.firstChild); where.insertBefore(msg, where.firstChild); } addOne.onclick = function () { addTo(log); } addTwo.onclick = function () { addTo(output); } reset.onclick = function () { log.innerHTML=""; output.innerHTML=""; }

 .output-div { display:inline-block; background-color: rgb(5, 20, 20); border: 2px solid black; padding-top:20px; overflow: auto; color: white; } body { background-color: black; } #div-1 { width:71vw; height: 40vh; top:17px; background-color:gray; top:17px; } #div-2 { width:20vw; height: 40vh; top:17px; background-color:blue; } code { display:block; }

 <button id="addOne">Add text to div one.</button> <button id="addTwo">Add text to div two.</button> <button id="reset">Reset the divs.</button> <br> <div id="div-1" class="output-div"></div> <div id="div-2" class="output-div"></div>