Проблема с границей кнопки, только на Mozilla и только на 1 из нескольких страниц сайта

Question

У меня на сайте очень странная проблема. При открытии домашней страницы в Mozilla границы двух кнопок на моем заголовке отсутствуют. Вы можете проверить веб-сайт здесь: http://www.beautiful-burger.com/

Просто откройте его на Mozilla и обновите его несколько раз, чтобы увидеть, о чем я говорю. Кнопки используются в правом верхнем углу, но они также используются в нижней части главной страницы (без каких-либо проблем на границах). Кроме того, если вы перейдете на другую страницу, например, в блоге Food, вы увидите, что там они выглядят просто отлично. Это проблема с шапкой? Я пытался выяснить это в течение последних 2 дней, но я понятия не имею, что происходит.. Он отлично работает в других браузерах. CSS я использую АТМ это:

    #header-button-container .primary-button,

    #header-button-container .secondary-button {
         color: #ffffff ;
         border: 1px solid #ffffff  !important;
         vertical-align: baseline;}

     .secondary-button {
            background-color: transparent  ;
            border: 1px solid #ffffff  !important;
            color: #fff !important;}


     .secondary-button:hover{
          background-color: #D0C274 !important ;
          color: #fff ;}


    .site-header .secondary-button { 
          color: #fff; }

Спасибо за ваше время и любую помощь. Не стесняйтесь спрашивать, если вам нужна дополнительная информация, так как я очень новичок в этом и, возможно, что-то упустил.

Answer 1

Я не могу воспроизвести проблему в моем Firefox. Какая версия и какая ОС?

В вашем css вы только нацеливаетесь на атрибуты границы, используя 'border:' вместо индивидуального указания. Используйте что-то вроде следующего.

#header-button-container-inner .button.secondary-button {
    border-color: white;
    border-style: solid;
    border-width: 1px;
}

если это не сработает

#header-button-container-inner .button.secondary-button {
    border-color: white !important;
    border-style: solid !important;
    border-width: 1px !important;
}

И если это не сработает

@-moz-document url-prefix() {
    #header-button-container-inner .button.secondary-button {
        border-color: white !important;
        border-style: solid !important;
        border-width: 1px !important;
    }
}