HTML通过元素呈现未定义的行?
下面生成了3个带有图标、文本和标题的框。(注意:对于JSFIDLE,您需要将显示窗口置于中括号内,以生成正确的布局)。这些都是响应性的,并使用引导框架。当我预览结果时,有时会在图示符下得到一条线。这是什么原因造成的?我在Google Chrome和Microsoft Edge中都能看到它,但是,有时候当我放大时,它会消失,如果放大更多,它会重新出现吗?其他时候,当我加载同一个文件时,它不会显示HTML通过元素呈现未定义的行?,html,css,Html,Css,下面生成了3个带有图标、文本和标题的框。(注意:对于JSFIDLE,您需要将显示窗口置于中括号内,以生成正确的布局)。这些都是响应性的,并使用引导框架。当我预览结果时,有时会在图示符下得到一条线。这是什么原因造成的?我在Google Chrome和Microsoft Edge中都能看到它,但是,有时候当我放大时,它会消失,如果放大更多,它会重新出现吗?其他时候,当我加载同一个文件时,它不会显示 有什么想法,或者知道如何进一步测试吗?尝试使用z-indexcss属性。()它基本上允许你说在行前渲
有什么想法,或者知道如何进一步测试吗?尝试使用
z-index
css属性。()它基本上允许你说在行前渲染图像。你链接的JSFIDLE没有复制问题,你能更新它以匹配你的问题吗?@LoremIpsum我不确定是什么导致了问题,它是喜怒无常的,所以它不会一直出现……亚像素取整是我最好的猜测。@Paulie_D如果你看这张图像,它似乎超出了彩色背景?尝试使用z-index
css属性。()它基本上允许你说在行前渲染图像。你链接的JSFIDLE没有复制问题,你能更新它以匹配你的问题吗?@LoremIpsum我不确定是什么导致了问题,它是喜怒无常的,所以它不会一直出现……亚像素取整是我最好的猜测。@Paulie_D如果你看这张图片,它似乎延伸到彩色背景之外?
<div class="row Page2">
<div class="col-sm-2 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-1 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-1 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-2 margin"></div>
<div class="col-sm-2 margin"></div>
<div class="col-sm-2">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h3><strong>Simple</strong></h3>
</div>
<div class="col-xs-6 col-sm-12 eqheight1">
<p class>Text.</p>
</div>
</div>
</div>
</div>
.Page2 > * {
border: 5px solid white;
background: #3DBEAF;
}
.Page2 > *:nth-child(-n+6) {
border-bottom: 0;
padding-top: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.Page2 > *:nth-last-child(-n+6) {
border-top: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.eqheight1,
.eqheight2,
.eqheight3 {
background: #3DBEAF;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}