技术咨询：不同浏览器间按钮间距不一致的问题如何解决？

不同浏览器自带的默认样式（User Agent Stylesheet）会给按钮添加不同的外边距、内边距，再加上Bootstrap的input-group组件在部分浏览器下的渲染细微差异，以及内联样式的干扰，很容易出现间距不一致的情况。下面是具体的解决步骤：

1. 统一浏览器基础样式 #

浏览器默认样式是导致差异的核心原因之一，你可以通过以下两种方式抹平这些差异：

方式一：自定义基础重置样式 #

在全局CSS文件中添加代码，强制统一元素的盒模型和按钮基础样式：

/* 确保所有元素的盒模型计算方式一致 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 统一按钮的基础渲染规则 */
.btn {
    border: 1px solid transparent;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

方式二：引入Normalize.css #

如果项目尚未使用，建议引入Normalize.css（可通过NuGet包或本地文件添加），它会保留有用的默认样式，同时统一浏览器间的渲染差异。

2. 针对Input Group内的按钮设置明确间距 #

针对你使用的Bootstrapinput-group组件，直接编写CSS强制统一按钮的间距和样式：

/* 修正input-group内按钮的间距 */
.input-group .btn {
    /* 清除浏览器默认的外边距 */
    margin-left: 0;
    margin-right: 0;
    /* 对齐Bootstrap默认按钮的内边距 */
    padding: .375rem .75rem;
    /* 如果按钮是组内最后一个元素，统一圆角 */
    border-radius: 0 .25rem .25rem 0;
}

/* 处理多个按钮并排时的边框重叠问题 */
.input-group .btn + .btn {
    margin-left: -1px;
}

3. 移除内联样式，改用CSS类 #

你代码中给文本框添加的内联width和max-width优先级高且不利于维护，建议移到CSS类中：

/* 自定义文本框宽度类 */
.delivery-date-input {
    width: 250px;
    max-width: 250px;
}

然后在Razor代码中替换为：

@Html.TextBox("DeliveryDate", Model.DeliveryDate.ToShortDateString(), "{0:MM/dd/yyyy}", 
    new { @class = "datefield form-control delivery-date-input", 
          @data_key = "delivery-date", 
          @data_original = Model.DeliveryDate.ToShortDateString() })

4. 利用Bootstrap的Flex工具类 #

Bootstrap的input-group基于Flex布局，你可以用内置工具类确保元素对齐一致：

• 如果按钮和输入框垂直对齐有问题，给input-group添加align-items-center类：

<div class="input-group align-items-center">
    <!-- 你的组件内容 -->
</div>

• 如果需要调整按钮和输入框的间距（Bootstrap 5+支持），添加gap-2类：

<div class="input-group gap-2">
    <!-- 你的组件内容 -->
</div>

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