Html 在Safari中处理的宽度与在Chrome中处理的宽度不同

我在让我的站点在Safari中正确显示时遇到了一些问题。 我主要是在Chrome上开发的，我注意到了一些不同浏览器之间宽度不一致的问题

该网站的URL为： 以下是该问题的屏幕截图：

菜单的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>

你知道是什么导致菜单不符合宽度吗？ 非常感谢，这是我的头像！ -米奇

更新-09.09.15 似乎给.main menu的li的第一个子div.custom-sub-menu指定一个宽度参数（如500px）可以阻止它崩溃。但并不是所有的下拉列表都应该是500px，宽度应该由内容决定

如何使div.custom-sub-menu元素的宽度与Safari以外的其他浏览器相同

米奇

---

那个网站看起来根本不像你的截图。你能提供更多细节吗？您使用的是什么浏览器、什么操作系统、什么设备等。您看到了什么？对我来说很好！请注意，截图被裁剪了！

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