FireFox＆amp; Chrome CSS不同

Question

问题是，网站的CSS在FireFox和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

我只是简单地告诉你你想要的东西：

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，如果您想要不均匀的数字，那么当您定位单个数字时。

Answer 2

据我说，这是字体渲染问题。字体的宽度在Chrome＆amp;中是不同的。 Firefox。因此，相同单词所需的像素在Firefox和Chrome中是不同的。 li。

除此之外，您使用的技术完全错误。使用是通过调整padding为每个/** 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; } 指定宽度。 而是为每行赋予相等的宽度。因此，将有足够的空间来容纳用字母改变。

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

{{1}}