css设置的border在平板上部分消失的问题

Question

代码如下：
html

< a class="btn" title="按钮">按钮< /a>

css

.queue-btn{
display: inline-block;
width: 40%;
border: 1px solid #EA552E;
color: #EA552E;
text-align: center;
font-size: 0.8em;
line-height: 2.3em;
margin: 0.5em;
}

在电脑上的浏览器中没问题，但是在平板上的浏览器中却出现会有部分border不显示，如果将border-width设置为2px，四个border都会有，但是会有1-2个border是2px。其他的是1px，这种情况怎么解决？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

这个问题是因为在平板上，元素可能没有足够的空间来容纳所有的border属性。你可以尝试使用百分比宽度（width: 100%;），这样可以让每个border都有足够的空间。

.queue-btn{
    display: inline-block;
    width: 100%;
    border: 1px solid #EA552E;
    color: #EA552E;
    text-align: center;
    font-size: 0.8em;
    line-height: 2.3em;
    margin: 0.5em;
}

如果你仍然遇到问题，可以尝试使用相对单位（min-content）或 flexbox 来调整布局。