移动端border-bottom显示为椭圆状的问题咨询

问题背景 #

电脑端开发者工具调试页面时，无论调整屏幕尺寸，Tab的border-bottom显示均正常；但手机端打开页面时，下划线呈现椭圆状。无法在电脑端复现该问题，尝试修改border-bottom厚度、添加边框媒体查询后，问题仍未解决。

相关CSS代码 #

/* button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none; } */

.tabs {
  display: block;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  overflow: hidden;
  padding-right: 2vw;
  padding-left: 2vw;

}

.tab-slider{
  padding-top: 0;
}

.QDslider{
  margin-left: 0;
  margin-right: 0;
  margin-bottom:9vw;
}

.requestmore{
  height:40px;
}

.tabs [class^="tab"] label,
.tabs [class*=" tab"] label {
  color: #292929;
  cursor: pointer;
  display: block;
  font-size: 1.1em;
  /* font-weight: 300; */
  line-height: 1em;
  padding: 1rem 0;
  text-align: center; }
.tabs [class^="tab"] [type="radio"],
.tabs [class*=" tab"] [type="radio"] {
  border-bottom: 1px solid rgba(239, 237, 239, 0.5);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus,
  .tabs [class*=" tab"] [type="radio"]:hover,
  /* .tabs [class*=" tab"] [type="radio"]:focus {
    border-bottom: 1px solid #fd264f; } */
  .tabs [class^="tab"] [type="radio"]:checked,
  .tabs [class*=" tab"] [type="radio"]:checked {
    border-bottom: 2px solid #fd264f; }
  .tabs [class^="tab"] [type="radio"]:checked + div,
  .tabs [class*=" tab"] [type="radio"]:checked + div {
    opacity: 1; }
  .tabs [class^="tab"] [type="radio"] + div,
  .tabs [class*=" tab"] [type="radio"] + div {
    display: block;
    opacity: 0;
    padding: 2rem 0;
    width: 90%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
.tabs .tab-2 {
  width: 50%; }
  .tabs .tab-2 [type="radio"] + div {
    width: 200%;
    margin-left: 200%; }
  .tabs .tab-2 [type="radio"]:checked + div {
    margin-left: 0; }
  .tabs .tab-2:last-child [type="radio"] + div {
    margin-left: 100%; }
  .tabs .tab-2:last-child [type="radio"]:checked + div {
    margin-left: -100%; }

@media screen and (max-width: 768px){
  .QDslider{
      margin-bottom:20vw;
  }

}

@media screen and (max-width: 678px){
  .QDslider{
      margin-bottom:63vw;
  }
}

问题分析 #

这个问题的核心是移动端浏览器对自定义样式的radio按钮存在默认样式残留。尽管你设置了appearance: none，部分移动端浏览器仍会给表单控件保留默认的border-radius属性，导致原本应该是直线的border-bottom显示成椭圆状。

修复方案 #

方案1：强制移除圆角（最简单） #

直接给radio按钮添加border-radius: 0，彻底消除圆角对边框的影响：

.tabs [class^="tab"] [type="radio"],
.tabs [class*=" tab"] [type="radio"] {
  border-bottom: 1px solid rgba(239, 237, 239, 0.5);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  border-radius: 0; /* 新增此行，强制取消圆角 */
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

方案2：改用伪元素实现下划线（更稳定） #

如果方案1无效，建议放弃用radio的border-bottom，改用伪元素实现下划线，完全避开表单控件的浏览器默认样式干扰：

1. 确保HTML结构中radio的位置与label对应（可根据实际结构调整选择器）
2. 修改CSS如下：

/* 重置radio样式，彻底隐藏默认外观 */
.tabs [class^="tab"] [type="radio"],
.tabs [class*=" tab"] [type="radio"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0;
  padding: 0;
  border: none;
  margin: 0;
}

/* 给label添加伪元素作为下划线容器 */
.tabs [class^="tab"] label,
.tabs [class*=" tab"] label {
  color: #292929;
  cursor: pointer;
  display: block;
  font-size: 1.1em;
  line-height: 1em;
  padding: 1rem 0;
  text-align: center;
  position: relative; /* 开启相对定位 */
}

/* 默认状态下划线 */
.tabs [class^="tab"] label::after,
.tabs [class*=" tab"] label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(239, 237, 239, 0.5);
  transition: all 0.3s ease-in-out;
}

/* 选中状态下划线（根据HTML结构调整选择器） */
.tabs [class^="tab"] [type="radio"]:checked + div + label::after,
.tabs [class*=" tab"] [type="radio"]:checked + div + label::after {
  height: 2px;
  background-color: #fd264f;
}

（注：如果radio直接紧跟在label之后，选择器改为[type="radio"]:checked + label::after即可）

验证建议 #

由于无法在电脑端复现，修改代码后直接在手机端测试即可。也可以使用Chrome DevTools的远程调试功能连接手机，实时查看元素样式，确认是否有其他浏览器默认样式被继承。

内容的提问来源于stack exchange，提问作者user23316095