我有两个输入，主要由Zurb的Foundation框架设计。它们位于.row.collapse，每个位于.medium-6.columns（这些列的宽度为50％，向左浮动，没有边距）。输入本身在其容器内是100％宽。这一切都非常简单，Inspector和jQuery.css都返回了我期望它们。但是存在边界问题。这是CSS的要点：
input {
border: 1px solid #dddddd;
&.first {
border-right-width: 0;
}
}
这具有折叠中间边界的效果。但出于某种原因，这个border-right-width: 0正在抛弃Webkit（Chrome和Safari而不是Firefox）。检查员显示1px边框和正确的边框颜色。白色输入背景与第二个输入正确对齐（即边框有空间），但没有灰色边框。也许它呈现透明？
如果我在视网膜显示屏上打开它，它会正常呈现 - 两者都有正确的边框。如果我放大，边框会在达到“小”媒体查询（移动设备大小）时显示。但我无法在Chrome中的非视网膜，桌面显示屏上显示此边框。
以下是Chrome浏览器的外观：
以下是它在Firefox中的表现：
要仔细检查，我使用Web Inspector将简单边框应用于第一个元素。它显示很好（看起来像Firefox截图）。添加border-right-width: 0重新引入了问题。 似乎明确表示这就是问题所在。但我不知道为什么？
似乎border-radius也可以参与其中？上面的Firefox屏幕截图显示了中间的双边框，尽管Inspector显示0右边框。如果我在Firefox中取消选中border-radius，则会解决该问题。
这些属性应该彼此独立。他们为什么互相影响？
尝试在codepen中重新创建。到目前为止不成功，但看起来它与transform有关 - 这些输入位于使用以下设置的容器中
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%,-50%));
无论现代浏览器的宽度或高度如何，这都会使元素垂直和水平居中。当我关闭transform时，边框就会显示出来。据我了解，transform访问GPU？或者它可以？似乎很可能这就是抛弃它。如果你看截图，有一些奇怪的边框瑕疵（比如，左边元素右边的部分内部边框），我无法解释。
它必须是transform - 将border-color更改为红色使这一点变得清晰：边框正在以亚像素级别渲染，然后由于某种原因，以一种时髦的方式切断。你可以在左侧输入周围看到一个模糊的粉红色边框：
答案 0 :(得分：0)
这可能会有所帮助，也可能没有帮助，没有小提琴，很难再创造;但我想分享一下我最近遇到的webkit浏览器和基金会。
默认情况下，Foundation会在每行或水平块的最后一列上附加一个右浮动...
foundation.css
[class*="column"] + [class*="column"]:last-child {
float: right; }
99％的时间这绝不是问题，除非列之间的边界非常小。 Webkit浏览器有时会奇怪地计算百分比。
你提到你的专栏左侧浮动，但万一这仍然是一个问题;重写上面的伪类以使最后一个子列向左浮动可能会有所帮助。