// 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>
设计图效果
iPhone 7p上实际效果
在部分iOS设备上，当border设置为dashed时，有些border 显示不全
open AI 给的回复如下：
- 子像素渲染问题
在某些情况下，iOS 浏览器对 子像素值 的渲染会导致边框缺失或显示异常。
原因： CSS 中的某些属性（例如宽度 w-[50px]、高度 h-[44px]、边框 border-2）在实际渲染中会产生浮点数值（如 49.9px），导致边框被忽略或未完全渲染。
解决方案： 确保宽度和高度是整数值，并避免浮点运算。
- border-dashed 样式在某些情况下的渲染问题
border-dashed在 iOS 上的渲染有时会不完整，特别是当边框宽度较小时。
原因： iOS WebKit 渲染 dashed 边框时可能出现图形精度问题，导致某些边框段不显示。
解决方案： 改用 border-solid 测试是否是 border-dashed 的问题。
- inline-flex 与 border 的渲染冲突
inline-flex 的父子元素布局渲染在某些情况下可能会导致边框缺失，特别是在父元素宽度不足时。
原因：
inline-flex 的宽度可能受到内容大小的限制，导致布局计算错误。
如果 w-[50px] 和 inline-flex 冲突（例如宽度不足以完全显示边框），右侧的边框可能会被剪裁。
解决方案：
将 inline-flex 替换为 flex 或设置明确的宽度：
inline-flex w-[50px] /* 确保宽度足够 */
或者添加 overflow: visible; 防止裁剪：
overflow: visible;
- iOS 渲染引擎的 Bug
某些版本的 iOS 浏览器（如 Safari）可能存在边框渲染的 Bug，尤其是与 rounded 和 border-dashed 结合使用时。
原因： iOS WebKit 在渲染 rounded 和 dashed 的边框时，可能会因为抗锯齿或浮点计算问题导致右侧边框不显示。
解决方案：
改变边框样式，使用 border-solid 或移除rounded：
border-solid
rounded-none
其中尝试
- 增大w的宽度，无效，改变border宽度无效
- 修改
broder-dashed为border-solid确实可以显示出完整的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>
