Mac和Windows浏览器中的不同CSS

这一直困扰着我一段时间，我似乎无法弄清楚。我有下面的代码创建这些带有加号的红色圆圈。在PC上，他们看起来很棒（所有主流浏览器），在Mac上，他们在所有主流浏览器上看起来都很糟糕。我不想根据用户代理修改我的CSS，因为这感觉很不好，我知道有一种方法可以让每个浏览器就如何显示它达成一致。Mac和Windows浏览器中的不同CSS

任何帮助是真正的赞赏。

在PC上：

PC Screenshot http://www.drury.edu/rue/windows_screenshot.png

在Mac上：

PC Screenshot http://www.drury.edu/rue/mac_screenshot.png

标记：

<ul class="sectionLinkHeading"> 
    <li class="sidebarHeading" id="sidebarHeading0"> 
     <span>Program Overview</span> 
     <div class="sidebarPlus" id="sidebarPlus0"></div> 
    </li> 
</ul>

CSS：

.sidebarPlus 
{ 
    box-sizing: border-box; 
    float: right; 
    width: 23px; 
    height: 24px; 
    margin-top: 13px; 
    margin-right: 8px; 
    padding-left: 6px; 
    background: #CB2E32; 
    border-radius: 50%; 
    color: #FFF; 
    font-size: 20px; 
    font-family: Museo-300; 
    font-weight: 500; 
} 

.sidebarPlus:after 
{ 
    content: "+"; 
    clear: both; 
}

如果您需要更多信息，我很乐意分享。不幸的是我不能提供一个实时链接，因为这个网站目前只有一个内部IP。

来源

2014-06-25 dukedevil294

也许使用的line-height对齐？ – pascalvgemert

那么字体是一种自定义的字体，我们不仅购买了标准的网页安全字体。那么不应该在浏览器中保持一致吗？ – dukedevil294

好的，无视我上面的说法。 –

上的伪.sidebarPlus:after父.sidebarPlus和position:absolute使用position:relative然后设置left和top。

.sidebarPlus 
      { 
       box-sizing: border-box; 
       float: right; 
       width: 23px; 
       height: 24px; 
       margin-top: 13px; 
       margin-right: 8px; 
       padding-left: 6px; 
       background: #CB2E32; 
       border-radius: 50%; 
       color: #FFF; 
       font-size: 20px; 
       font-family: Museo-300; 
       font-weight: 500; 
       position:relative; 
      } 

      .sidebarPlus:after 
      { 
       content: "+"; 
       clear: both; 
       position:absolute; 
       left:2px; 
       top:2px; 
      }

或者只是添加此+

<ul class="sectionLinkHeading"> 
    <li class="sidebarHeading" id="sidebarHeading0"> 
     <span>Program Overview</span> 
     <div class="sidebarPlus" id="sidebarPlus0">&plus;</div> 
    </li> 
</ul>

和相对.sidebarHeading使用位置和位置绝对以sidebarPlus和删除.sidebarPlus:after到你的CSS

来源

2014-06-25 21:10:37

这很接近，但圆圈内的加号仍然是3px到高点。使用你的设置，如果我添加顶部：3px到：之后，它可以在Mac上使用，但在PC上是3px到低（PC上的正确值是顶部：0px而不是2px） – dukedevil294

您使用* {box- sizing：border-box;}因为这可以改变很多，所以尝试将它添加到你的CSS –

Mac和Windows浏览器中的不同CSS

回答

相关问题