Bootstrap 3 建设的网站,栅格使用position: relative导致文字闪烁,忽粗忽细。
我使用Bootstrap 3建设了一个网站,后来发现一个问题,网页内的文字,凡是使用了栅格系统,即放在row下的内容,文字都会有节奏的闪烁,文字一会儿粗一会儿细,找了很久,终于发现了问题:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2,
.col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4,
.col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7,
.col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9,
.col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12,
.col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
就是上面这段CSS代码,只要我把 position: relative; 这个属性禁用,网页中的文字就不闪了,不知为何,也不知怎么解决这个问题,不知大家有没有发现这个问题,如何才能解决这个问题呢,因为一旦禁用,就不能浮动定位了。
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2,
.col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4,
.col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7,
.col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9,
.col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12,
.col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
就是上面这段CSS代码,只要我把 position: relative; 这个属性禁用,网页中的文字就不闪了,不知为何,也不知怎么解决这个问题,不知大家有没有发现这个问题,如何才能解决这个问题呢,因为一旦禁用,就不能浮动定位了。
2 个回复
ibtgus
赞同来自:
钟平勇
赞同来自: