Safari中的宽度处理方式与Chrome中的宽度不同

Question

我在浏览器中正确显示网站时遇到了一些问题。 我一直在Chrome中开发它，并注意到一些问题，宽度在浏览器中不一致。

网站的网址为：http://fivestarmusic.com.au
以下是该问题的屏幕截图：

菜单的HTML示例如下。

<div id="menu-main-menu" class="main-menu">
    <ul id="menu-main-menu" class="main-menu">
        <li id="menu-item-1" class="menu-item">
            <a href="some.url">Guitars</a>
            <div class="custom-sub-menu">
                <ul class="sub-menu" style="-webkit-column-count: 3;">
                    <li id="menu-item-2" class="menu-item">
                        <a href="someother.url">Electric Guitars</a>
                        <div class="custom-sub-menu">
                            <ul class="sub-menu">
                                <li id="menu-item-3" class="menu-item">
                                    <a href="anotherlink.url">Fender</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

当我使用SASS时，菜单的代码是：

    div.menu-main-menu-container {
    padding: 29px 0 29px 0;
    float: right;
    > ul.main-menu {
        list-style: none;
        > li.menu-item {
            display: inline;
            float: left;
            position: relative;
            @include clearer;
            > a {
                @include font($openSans, $sFont, $navText);
                padding: 10px;
                text-decoration: none;
                text-transform: uppercase;
            }
            > div.custom-sub-menu {
                display: none;
                position: absolute;
                top: 28px;
                background: white;
                padding-top: 10px;
                margin-left: -1px;
                border-left: 1px solid $navColor;
                border-right: 1px solid $navColor;
                border-bottom: 1px solid $navColor;
                > ul.sub-menu {
                    list-style: none;
                    column-gap: 0px;
                    column-count: 2;
                    -webkit-column-gap: 0px;
                    -webkit-column-count: 2;
                    -mox-column-gap: 0px;
                    -moz-column-count: 2;
                    > li.menu-item {
                        padding: 0 0 10px 10px;
                        white-space: nowrap;
                        display: block;
                        > a {
                            @include font($openSans, $sFont, $navColor);
                            font-weight: 700;
                            padding: 0;
                            text-decoration: none;
                            text-transform: uppercase;
                            &:hover {
                                color: $hoverText;
                            }
                        }
                        > div.custom-sub-menu {
                            > ul.sub-menu {
                                list-style: none;
                                > li.menu-item {
                                    white-space: none;
                                    padding: 10px 10px 0 10px;
                                    > a {
                                        @include font($openSans, $sFont, $navColor);
                                        text-transform: uppercase;
                                        padding: 0px;
                                        text-decoration: none;
                                        &:hover {
                                            color: $hoverText;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

任何想法可能导致菜单不遵守宽度？
非常感谢你提前做好了准备！   - Mikey

更新 - 09.09.15
似乎给第一个div.custom-sub-menu（.main-menu's li的子）一个像“500px”这样的宽度参数会使它崩溃。但不是所有的下降都应该是500px，宽度应该由内容决定！

如何让div.custom-sub-menu元素假设宽度与Safari以外的其他浏览器一样？

• 米奇