Mac和Windows浏览器中的不同CSS

Question

This has been plaguing me for awhile now and I can't seem to figure it out. I have the below code creating these red circles with plus signs in them. On a PC they look great (all major browsers) and on a Mac they look horrible on all major browsers. I'd like to not modify my CSS based on the user agent because that feels hacky and I know there is a way to get every browser to agree on how to display it.

Any help is truly appreciated.

On a PC:

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

On a Mac:

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

Markup:

<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;
}

If you need any more information I'd be happy to share. Unfortunately I cannot provide a live link as this site currently only has an internal IP.

Answer 1

Use position:relative on the parent .sidebarPlus and position:absolute on the pseudo .sidebarPlus:after then set left and 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;
            }

or just add this +

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

and the use position relative to .sidebarHeading and position absolute to sidebarPlus and remove .sidebarPlus:after to your css