Mac 和 Windows 浏览器中的不同 CSS

Question

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

非常感谢任何帮助。

在电脑上：

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。

Answer 1

在父 .sidebarPlus 上使用 position:relative 和 position:absolute 在伪 .sidebarPlus:after 上，然后设置 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