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

使用position:relative上的.sidebarPlus和伪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

Mac和Windows浏览器中的不同CSS

1 个答案: