【问题标题】：Pinstripe displaying on Boss's tabletBoss 平板电脑上显示的细条纹
【发布时间】：2015-02-10 11:11:34
【问题描述】：

基本上我有this site，它在我的所有浏览器和在线工具上都可以正常显示，但我老板的平板电脑在页脚中呈现了一条奇怪的线。

而且它只是老板的平板电脑，所有其他浏览器，包括我的 iPad、Windows Phone、笔记本电脑和台式机，以及多个模拟器都可以正确显示它。

我玩过边距，什么都没有；没有国界可言。

这让我很困惑，而且我已经这样做了十多年了。为什么一定要在他的机器上！？

在检查器/调试器中玩一玩。

（暂时无法发布图片 - 没有足够的代表）

【问题讨论】：

你的 .home .content 文章上有一个边框底部：first-child 选择器
首页、内容部分以及仅适用于第一篇文章的除外。我正在处理页脚，并且该样式不适用。我真希望我能发布这张图片。
样式正确。但是，您必须使其可用于窗口宽度 767px 或以下。使用最大宽度的媒体查询：767px
当您提到您老板的平板电脑时，请提供它所在的型号和操作系统，我已经在下面回答了您的问题。您可以轻松地在任何“图片上传”服务上上传图片并在此处获取链接。
我所有的媒体查询都在最大宽度上，你所说的样式在 1024 中 - 我没有使用 767。

标签： html css windows tablet styling

【解决方案1】：

在您的文件 template.css 中，查看 第 422 行

.home .content article:first-child { border-left:0; border-right:0; border-bottom:.1em solid #ccc; }

替换为

.home .content article:first-child { border-left:0; border-right:0; border-bottom: 0; }

参考图片

更新

我注意到在屏幕尺寸为 768 或更小的屏幕上，您正在为同一类添加边框底部

.home .content article:first-child

在您的文件 template.css 中，查看 第 425 行

@media only screen and (max-width: 768px) {

替换为

@media only screen and (max-width: 768px){
     .home .content article:first-child {
        border-left: 0;
        border-right: 0;
        border-bottom: .1em solid #ccc;
}

参考图片

所以您现在已经从 @media query 1024 中删除了border-bottom 属性，并将该属性添加到了@media query 768

这应该可以解决问题。

【讨论】：

那是内容的文章——字面意思，它只是首页的第一篇文章，没有别的。我遇到的问题是页脚，只有一个间隙。
仍然适用。 768px 中没有第二个边框底部。
谈到 1024 宽度，您不必拥有border-bottom 属性，因为您的布局并没有像在 768 上那样完全改变，当它更改为不同的布局时，您的边框-在 max-width 1024 上实现的底部实际上可以工作，因此无需在 max-width 1024 中定义它，而是您必须在 768 媒体查询下执行此操作，因为 max-width 1024 将在顶部创建奇数行页脚的。

【解决方案2】：

你指的是这条线吗？如果是，请将您的媒体查询至max-width: 767px;

【讨论】：

参考我的回答，已经解释过了，没有必要将 1024 宽度替换为 768，因为样式表分别包含两个宽度。
不，不是。我知道那个错误，主要是在 Safari 中——不是“优先级”。
你能把图片邮寄到 bootstrapissue@mailinator.com 吗？
这不是BUG，而是你的逻辑实现不好，无论你在什么操作系统上都会显示，我目前在Windows和Mac平台上一起测试过。在您所指的 UNKNOWN 平板电脑上，它也可能有点低，请指定确切的问题，否则您的问题会变得过于广泛
抱歉，我认为问题出在标签上。但是，请不要使用苛刻的句子。谢谢。