Проблемы с CSS в Safari 10.0

ProgramBox

Проблемы с CSS в Safari 10.0

Post author:admin
Запись опубликована:17 февраля, 2023
Post category:Вопросы по программированию

#css #wordpress #safari

Вопрос:

Я разрабатывал веб-сайт для себя с помощью WordPress и пытался отредактировать CSS, который управляет меню на сайте, я попытался уменьшить меню, чтобы оно было не таким толстым, как изначально. Это хорошо выглядит во всех моих браузерах, но я пробовал это на MAC под управлением Safari 10.0, но меню, похоже, не хочет сжиматься должным образом. Пункты меню, содержащие выпадающие списки, находятся в исходных местах и не перемещаются вверх. Как вы можете видеть, Chrome выглядит хорошо. Изображение Chrome

И меню Safari никуда не годится. Safari 10.0

CSS, который запускает это меню, выглядит следующим образом;

 #navigation-menu {
    position:absolute;
    top:0;
    font-size:14px;
    height:28px;
    width: 100%;
}
.navigation-menu {
    position:relative;
    z-index:101;
}
#main-menu {
    /*background: url(../../common-images/main-menu-btm-border.png) repeat-x scroll 50% 100% transparent;*/
    /*background: #f0f0f0;*/
    background: #555555;
    width: 100%;
    position:relative;
    z-index:auto;
    height:28px;
    margin-bottom:0;
    border-top: 4px solid #000;
}
#dropdown-holder {
    display: block;
    position:relative;
}
#navigation-menu > ul {
    padding-top: 1px;
}
#navigation-menu > * {
    padding:0;
    margin:0;
    font-size: 1em;
}
#navigation-menu ul.sf-menu {
    padding: 0;
    margin-top: 0;
    height: inherit;
}
#navigation-menu ul.sf-menu > li {
    background: none;
    list-style: none;
    float: left;
    margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-menu a.default-cursor {
    cursor: defau<
}
#navigation-menu ul.sf-menu > li > a {
    display: block;
    padding: 0px 40px 0px 0;
    /*color: #E8E8E8;*/
    color: #FFF;
    text-decoration: none;
    border: 0 none;
    cursor: pointer;
    text-transform: none;
    font-weight: 400;
}
#navigation-menu ul.sf-menu a {
    line-height: 1.2em;
    padding:8px 16px;
}
#navigation-menu ul.sf-menu a.sf-with-ul:after {
    top: 18px !important;
}
#navigation-menu ul.sf-menu ul a.sf-with-ul:after {
    top: 0.9em !important;
}
#navigation-menu ul.sf-menu > li > a > span {
    display: block;
    padding: 3px 0 3px 40px;
    color: #fff;
    line-height: 22px;
    /*border-left: 1px solid #d8d8d8;*/
    border-left: 1px solid #777777;
}
#navigation-menu ul.sf-menu > li {
    margin: 0 0 0 -3px;
}
#navigation-menu ul.sf-arrows > li > a.sf-with-ul {
    padding: 10px 26px 10px 0;
}
#navigation-menu ul.sf-arrows > li > a.sf-with-ul:hover {
    padding: 10px 26px 10px 0;
}
#navigation-menu ul.sf-arrows > li > a.sf-with-ul:after {  /* give all except IE6 the correct values */
    padding: 10px 0 10px 0;
}
#navigation-menu ul.sf-menu > li > a:hover {
    color: #999;
    text-decoration: none;
}
#navigation-menu ul.sf-menu > li > a:hover span {
    color: #777;
}

#navigation-menu ul.sf-menu > li.current-menu-item > a,
#navigation-menu ul.sf-menu > li.current_page_item > a {
    color: #FFF;
    text-decoration: underline;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span,
#navigation-menu ul.sf-menu > li.current_page_item > a > span {
    color: #F95A09;
}
#navigation-menu ul.sf-menu > li.current-menu-item > a > span:hover,
#navigation-menu ul.sf-menu > li.current_page_item > a > span:hover {
    color: #777;
}

Исходный код CSS меню приведен ниже

 /*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin:         0;
    padding:        0;
    list-style:     none;
}
.sf-menu {
    line-height:    1.0;
}
.sf-menu ul {
    position:       absolute;
    top:            -999em;
    width:          10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
    width:          100%;
}
.sf-menu li:hover {
    visibility:     inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
    float:          left;
    position:       relative;
}
.sf-menu a {
    display:        block;
    position:       relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:           0;
    top:            28px; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:           10em; /* match ul width */
    top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:           10em; /* match ul width */
    top:            0;
}

/*** DEMO SKIN ***/
.sf-menu {
    float:          left;
    margin-bottom:  1em;
}
.sf-menu a {
    padding:        .75em 1em;
    text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:          #777;
}
.sf-menu a:hover  { 
    color:          #222;
}
.sf-menu li {
    background:     transparent;
}
.sf-menu li li {
    background: url('../images/sf-menu-bg.png') no-repeat 0 100%;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    outline:        0;
}

/*** arrows **/
.sf-arrows a.sf-with-ul {
    padding-right:  2.25em;
    min-width:  1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-arrows .sf-with-ul:after,
.sf-arrows .top_bg_color .sf-with-ul:after {
    content: '';
    position:       absolute !important;
    display:        block !important;
    right:          10px !important;
    top:            1.05em !important; /* IE6 only */
    width:          10px !important;
    height:         10px !important;
    text-indent:        -999em !important;
    overflow:       hidden !important;
}
/* indicator image for light background */
.sf-arrows .sf-with-ul:after {
    background:     url('../images/auto-arrows.png') no-repeat -10px -100px !important; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
/* indicator image for dark background */
.top-bg-color-dark .sf-arrows .sf-with-ul:after {
    background:     url('../images/auto-arrows.png') no-repeat -30px -100px !important; /* 8-bit indexed alpha png. IE6 gets solid image only */
}

.sf-arrows a.sf-with-ul:after {  /* give all except IE6 the correct values */
    top:            .8em !important;
    background-position: 0 -100px !important; /* use translucent arrow for modern browsers*/
}
/* hovers for light background */
.sf-arrows a.sf-with-ul:focus:after,
.sf-arrows a.sf-with-ul:hover:after,
.sf-arrows a.sf-with-ul:active:after,
.sf-arrows li:hover > a.sf-with-ul:after,
.sf-arrows li.sfHover > a.sf-with-ul:after {
    background-position: -10px -100px !important; /* arrow hovers for modern browsers*/
}
/* hovers for dark background */
.top-bg-color-dark .sf-arrows a.sf-with-ul:focus:after,
.top-bg-color-dark .sf-arrows a.sf-with-ul:hover:after,
.top-bg-color-dark .sf-arrows a.sf-with-ul:active:after,
.top-bg-color-dark .sf-arrows li:hover > a.sf-with-ul:after,
.top-bg-color-dark .sf-arrows li.sfHover > a.sf-with-ul:after {
    background-position: -40px -100px !important; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-arrows ul .sf-with-ul:after { background-position:  -10px 0 !important; }
.sf-arrows ul a.sf-with-ul:after { background-position:  0 0 !important; }
/* apply hovers to modern browsers */
.sf-arrows ul a.sf-with-ul:focus:after,
.sf-arrows ul a.sf-with-ul:hover:after,
.sf-arrows ul a.sf-with-ul:active:after,
.sf-arrows ul li:hover > a.sf-with-ul:after,
.sf-arrows ul li.sfHover > a.sf-with-ul:after {
    background-position: -10px 0 !important; /* arrow hovers for modern browsers*/
}

.u-design-menu-drop-shadows-on .sf-menu ul {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

И HTML прямо со страницы.

 <div class="clear"></div>

            <div id="main-menu" class="pngfix">

                <div id="dropdown-holder" class="container_24">

<div id="navigation-menu" class="navigation-menu"><ul id="main-top-menu" class="sf-menu"><li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16"><a href="http://new.3dedge.com.au/"><span>home</span></a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://new.3dedge.com.au/about/"><span>about</span></a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://new.3dedge.com.au/services/"><span>services</span></a></li>
<li id="menu-item-504" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-504"><a href="http://new.3dedge.com.au/gallery/"><span>gallery</span></a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://new.3dedge.com.au/blog/"><span>blog</span></a></li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://new.3dedge.com.au/faq/"><span>faq</span></a></li>
<li id="menu-item-117" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117"><a href="http://new.3dedge.com.au/downloads/"><span>downloads</span></a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://new.3dedge.com.au/contact-us/"><span>contact us</span></a></li>
<li id="menu-item-525" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-525"><a href="http://new.3dedge.com.au/links/"><span>links</span></a></li>
</ul></div>
                </div>

                <!-- end dropdown-holder -->

            </div>

Я, честно говоря, не уверен, что вызывает деформацию меню в Safari 10.0. У кого-нибудь есть какие-нибудь идеи?
Спасибо!

1. сама ОС, вероятно, не имеет к этому никакого отношения. вы должны указать, на какой версии Safari вы используете.

2. Я здесь, чтобы указать на то же самое… вы должны обновить заголовок…

3. Не могли бы вы также добавить HTML для меню? Таким образом, мы не можем видеть, какие классы применяются, где и в каком порядке и т.д.

4. Я разместил HTML-код для меню с самой страницы, не слишком уверенный, где HTML будет находиться на стороне администратора WordPress. Спасибо

Вопрос:

Комментарии:

Вам также может понравиться

Grails — «Не удается получить свойство ‘grails’ для нулевого объекта» из модульного теста

Как записать видео с воспроизведением звука в фоновом режиме и не записывать никаких других звуков с помощью микрофона?

Распределение потоков сервера C #