我正在嘗試描述一個和弦 B?，但它在<option>HTML 標簽中的顯示很奇怪。它不是“B?”，而是在“B”和“?”之間有一個明顯的空間。
我嘗試將 CSS 樣式 ,letter-spacing應用于<span>標簽中的這個和弦，但顯然，這并不能控制字距調整。
有趣的是，當我從下拉串列中選擇和弦時，我的作業系統會正確呈現字距調整，但在選擇后，平面符號會自行顯示，并被空格隔開，如下所示。
我試圖呈現的 JS 文字是，
'B\u266D'
使用文字'B♭'只是'B♭'在下拉串列中呈現。
FWIW，我在 Vue3 中執行此操作，并在 Mac 上查看 Chrome 中的輸出。
uj5u.com熱心網友回復：
這似乎是 macOS（以及其他基于 Chromium 的瀏覽器和其他作業系統）上的 Chrome 96 中的渲染問題。macOS 上的 Firefox 91可以正確呈現它。該問題也僅影響平面( \u266d) 和自然( \u266e) 標志。該尖銳，重升，并且雙扁標志是在我的測驗不受影響。
您可以通過將<select>'s調整letter-spacing為負值（使字符靠得更近，從而減少間隙）來解決此問題，并使用padding右側的 來補償減小的寬度。您只想對受影響的標志有條件地執行此操作，因此請使用回傳必要letter-spacing和的計算道具padding：
使用
v-model上的<select>來捕捉選定的筆記。使用計算道具回傳呼整
letter-spacing和所需的樣式padding。當所選筆記包含有問題的符號時，回傳呼整后的間距/填充。將計算樣式系結到
<select>的樣式。
<script setup>
const notes = [
'B\u266d', // flat
'B\u266e', // natural
'B\u266f', // sharp
'B\u{1D12B}', // double flat
'B\u{1D12A}', // double sharp
]
1??
let selectedNote = $ref(notes[0])
2??
let styles = $computed(() => {
if (selectedNote.includes('\u266d') || selectedNote.includes('\u266e')) {
return {
'letter-spacing': '-20px',
'padding-right': '40px',
}
}
})
</script>
<template>
<select 1?? v-model="selectedNote" :style="styles" 3??>
<option v-for="note in notes">{{ note }}</option>
</select>
</template>
注意：所述的<script setup>上述用途的新的/實驗物種變換，它支持全域定義的反應性的API（ $ref，$computed等），并消除了需要的unwrapref秒。
演示
結果在 macOS 上的 Chrome 96 上：
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/397818.html