purecss 的 grid 样式问题

网址是这个我本地笔记本mac测试(chrome，safari)的时候，一行三列那个grid一切正常。但是用台式机windows测试的时候(chrome，360，ie，ff等)，就只有两个pure-u-1-3在一排，另一个到下一排去了，不知道为什么。但是用IE，FF显示良好。我看了笔记本和台式机chrome版本都是最新的啊。莫非是屏幕宽度问题？那为啥IE又显示正确了呢。我打开官方示例的时候无论什么浏览器都没有问题。我个人感觉可能是1.屏幕尺寸问题**2.其他样式干扰*****不过我纯业余啊，完全不懂前端啊！我也不知道那个RefineryCMS自带的样式哪些可以由purecss代替的，直接删掉的。感觉直接覆盖应该没有问题才对啊！求大虾帮忙！

<%=render'/refinery/html_tag'%><%site_bar=render('/refinery/site_bar',:head=>true)-%><%=render'/refinery/head'%><%=site_bar-%><%=render'/refinery/ie6check'ifrequest.env['HTTP_USER_AGENT']=~/MSIE/-%><%=render'/refinery/header'-%><%=yield%><%=render'/refinery/footer'-%>

<%=render'/refinery/javascripts'%>'/><%=browser_title(yield(:title))%><%=raw%()if@meta.meta_description.present?-%><%=raw%()if@meta.meta_keywords.present?-%><%=raw%()if@canonical.present?-%><%=csrf_meta_tagsifRefinery::Core.authenticity_token_on_frontend-%><%=yield:meta%><%=stylesheet_link_tag"application","formatting","theme"%><%=stylesheet_link_tag"home"ifhome_page?%><%=yield:stylesheets%><%=render'/refinery/google_analytics'%><%=javascript_include_tag'modernizr-min'%>

qq_遁去的一_1

浏览 355回答 2

2回答

白衣染霜花

因为字体!!他的grid是用displayinline-block横向平铺的原理实现的你看他的样式里面引入了一个字体的,要么修改他的源码里面letter-spacing:-0.43em[依稀记得类似这样子]这个值的大小,要么也引入他的那个字体总之这是一个坑

0 0

HUX布斯

对，是字体问题，我查到了这篇，写的比较详细。显然，这里纯粹使用了letter-spacing和word-spacing来控制元素间的空隙，局限性极大，-0.31em和-0.43em只是因为YUI3全局cssfonts.css里设置是：「body{font:13px/1.231arial,helvetica,clean,sans-serif;}」。yui的解决方案好像是针对字体的。然后我这里字体和那个letter-spacing不匹配，就会有bug(貌似)。我现在直接用cssfonts了，其他先不管了。

0 0

随时随地看视频慕课网APP