FireFox 和 Chrome CSS 不同

Question

问题是，网站的 CSS 在 FireFox 和 Chrome 上是不同的..

火狐按我想要的方式加载它，但在 chrome 中它搞砸了......

我也尝试将其添加到 CSS 中，

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

我使用的是 Visual Studio 2010，所以该网站在我的本地主机上...

我尝试清除所有 cookie/缓存...

尝试使用不同的基于 Chrome 的浏览器..（SW Iron）...似乎是一样的...

这就是问题所在..

.categories ul {
    margin: 0; padding: 0;
    float: left;
    width:100%;
}

.categories ul li {
    display: inline;
    float:left;
    padding-top:10px;
}


.categories ul li:nth-child(1) a{
  padding: 0 66.5px 10px 66.5px;
  margin-left:16.375px;
}

.categories ul li:nth-child(4) a{
  padding: 0 69px 10px 69px;
}

.categories ul li:nth-child(6) a:after{
  display:none;
}

.categories ul li:nth-child(7) a{
  margin-left:15.375px;
}

.categories ul li:nth-child(8) a{
  padding: 0 51px 10px 51px;
}

.categories ul li:nth-child(10) a{
  padding: 0 73px 10px 73px;
}

.categories ul li:nth-child(11) a:after{
  display:none;
}

.categories ul li:nth-child(12) a{
  margin-left:16.375px;
  padding: 0 53px 10px 53px;
  border-bottom:none;
}

.categories ul li:nth-child(13) a{
  padding: 0 53px 10px 53px;
  border-bottom:none;
}

.categories ul li:nth-child(14) a{
  border-bottom:none;
}

.categories ul li:nth-child(15) a{
  padding: 0 53px 10px 53px;
  border-bottom:none;
}

.categories ul li:nth-child(16) a{
  border-bottom:none;
}

.categories ul li:nth-child(17) a:after{
  display:none;
}

.categories ul li:nth-child(17) a{
  border-bottom:none;
}


.categories ul li a {
   position : relative;
    float: left; 
    text-decoration: none;
    color: white; 
    padding-bottom:10px;
    padding-left:40px;
    padding-right: 40px;
    border-bottom: 2px solid #e5e5e5;
}
.categories ul li a:after {
  position: absolute;
  right: 0;
  content: '';
  height: 100%;
  width: 1px;
  background: linear-gradient(to top, black, transparent);
}
 
 .categories ul li a:hover, .categories ul li .current 
 {
     
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 1%, rgba(255,255,255,0.12) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(0,0,0,0)), color-stop(100%,rgba(255,255,255,0.12))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(255,255,255,0.12) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(255,255,255,0.12) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(255,255,255,0.12) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 1%,rgba(255,255,255,0.12) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#1fffffff',GradientType=0 ); /* IE6-9 */


}
 
.categories ul li a:visited {
    color: white;
}

Firefox 图片在顶部.... Chrome 在底部...

Answer 1

据我所知，这是字体渲染问题。 Chrome & Firefox 的字体宽度不同。因此，Firefox 和 Chrome 中相同单词所需的像素是不同的。

此外，您使用的技术完全错误。使用通过调整padding 为每个li 指定宽度。 而是为每一行赋予相等的宽度。因此会有多余的空间来适应字母的变化。

更新后的通用代码应如下所示：

/** General List Styles **/
ul{
    display: block;
    margin:0; padding:0;
    list-style:none;
}

li{
    float:left;
    display:block;
    width:16.66%;
    position:relative;
}

li a{
    display: block;
    font-size: 14px;
}

/** Middle Row Cell (Using 'middle' class on them) **/
li.middle{
    width:20%;
}

/** No Sep Cell (Using 'nosep:after' class on them) **/
li.nosep:after{
    display:none;
}

Answer 2

我只会告诉你你要找的东西：

ul {
    display: block;}

li {
    display: inline-block;
    width: auto;
    height: auto;}

li a {
    display: block;
    padding: 5px 50px;
    font-size: 14px;}

li:after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 10px;
    background: black;}

li:last-child:after {
    display: none;}

如果您只是希望它们自然堆叠，那么您可以调整 li a 中的填充以修改间距，但如果您总是在每行寻找一定数量，那么添加一些百分比宽度到li，如果您想要奇数，那么您可以针对单个数字。