// React+tailwind.css
<span
className={twMerge(classNames(
"text-xl ml-1.5 px-3.5 w-[50px] h-[44px]",
"inline-flex items-center justify-center",
"border-2 rounded-l-xl border-dashed border-pri-2",
"text-pri-2 bg-pri-8",
className
)
)}
style={style}
key={key}
id={id}
>
{QUESTION_MARK}
</span>
在部分iOS設(shè)備上，當(dāng)border設(shè)置為dashed時(shí)像寒，有些border 顯示不全
open AI 給的回復(fù)如下：
- 子像素渲染問題
在某些情況下，iOS 瀏覽器對(duì) 子像素值 的渲染會(huì)導(dǎo)致邊框缺失或顯示異常锌蓄。
原因： CSS 中的某些屬性（例如寬度 w-[50px]安岂、高度 h-[44px]、邊框 border-2）在實(shí)際渲染中會(huì)產(chǎn)生浮點(diǎn)數(shù)值（如 49.9px），導(dǎo)致邊框被忽略或未完全渲染普泡。
解決方案： 確保寬度和高度是整數(shù)值播掷，并避免浮點(diǎn)運(yùn)算。
- border-dashed 樣式在某些情況下的渲染問題
border-dashed在 iOS 上的渲染有時(shí)會(huì)不完整撼班，特別是當(dāng)邊框?qū)挾容^小時(shí)歧匈。
原因： iOS WebKit 渲染 dashed 邊框時(shí)可能出現(xiàn)圖形精度問題，導(dǎo)致某些邊框段不顯示砰嘁。
解決方案： 改用 border-solid 測試是否是 border-dashed 的問題件炉。
- inline-flex 與 border 的渲染沖突
inline-flex 的父子元素布局渲染在某些情況下可能會(huì)導(dǎo)致邊框缺失，特別是在父元素寬度不足時(shí)般码。
原因：
inline-flex 的寬度可能受到內(nèi)容大小的限制妻率，導(dǎo)致布局計(jì)算錯(cuò)誤。
如果 w-[50px] 和 inline-flex 沖突（例如寬度不足以完全顯示邊框）板祝，右側(cè)的邊框可能會(huì)被剪裁宫静。
解決方案：
將 inline-flex 替換為 flex 或設(shè)置明確的寬度：
inline-flex w-[50px] /* 確保寬度足夠 */
或者添加 overflow: visible; 防止裁剪：
overflow: visible;
- iOS 渲染引擎的 Bug
某些版本的 iOS 瀏覽器（如 Safari）可能存在邊框渲染的 Bug，尤其是與 rounded 和 border-dashed 結(jié)合使用時(shí)券时。
原因： iOS WebKit 在渲染 rounded 和 dashed 的邊框時(shí)孤里，可能會(huì)因?yàn)榭逛忼X或浮點(diǎn)計(jì)算問題導(dǎo)致右側(cè)邊框不顯示。
解決方案：
改變邊框樣式橘洞，使用 border-solid 或移除rounded：
border-solid
rounded-none
其中嘗試
- 增大w的寬度捌袜，無效，改變border寬度無效
- 修改
broder-dashed為border-solid確實(shí)可以顯示出完整的border - 添加
overflow: visible無效 - 使用
rounded-none無效炸枣，使用rounded-sm有效
由于需求要求用dashed border虏等，所以最終添加了rounded-r-sm來解決問題
// React+tailwind.css
<span
className={twMerge(classNames(
"text-xl ml-1.5 px-3.5 w-[50px] h-[44px]",
"inline-flex items-center justify-center",
"border-2 rounded-l-xl rounded-r-sm border-dashed border-pri-2",
"text-pri-2 bg-pri-8",
className
)
)}
style={style}
key={key}
id={id}
>
{QUESTION_MARK}
</span>
