// 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ù)如下：
- 子像素渲染問(wèn)題
在某些情況下，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 樣式在某些情況下的渲染問(wèn)題
border-dashed在 iOS 上的渲染有時(shí)會(huì)不完整，特別是當(dāng)邊框?qū)挾容^小時(shí)。
原因： iOS WebKit 渲染 dashed 邊框時(shí)可能出現(xiàn)圖形精度問(wèn)題，導(dǎo)致某些邊框段不顯示。
解決方案： 改用 border-solid 測(cè)試是否是 border-dashed 的問(wèn)題。
- 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ì)算問(wèn)題導(dǎo)致右側(cè)邊框不顯示。
解決方案：
改變邊框樣式，使用 border-solid 或移除rounded：
border-solid
rounded-none
其中嘗試
- 增大w的寬度，無(wú)效，改變border寬度無(wú)效
- 修改
broder-dashed為border-solid確實(shí)可以顯示出完整的border - 添加
overflow: visible無(wú)效 - 使用
rounded-none無(wú)效，使用rounded-sm有效
由于需求要求用dashed border，所以最終添加了rounded-r-sm來(lái)解決問(wèn)題
// 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>
