Высокая контрастность с IE и Edge - PullRequest
Новая
       37

Высокая контрастность с IE и Edge

0 голосов
/ 30 апреля 2019

Я столкнулся с ошибкой в ​​браузере IE и Edge. У меня есть список вкладок, и когда вкладка выбрана, я добавляю подчеркивание к выбранной вкладке, чтобы сделать ее видимой как выбранную. Когда вы включаете режим высокой контрастности, он все еще показывает, но с другим цветом, как ожидалось. Это нормально работает в Chrome, но в случае IE и Edge подчеркивание при включении режима высокой контрастности

Я попробовал несколько исправлений, немного исследовал и обнаружил, что добавление border-right и border-left к стилю подчеркивания делает его видимым. Но мне нужно указать ширину в ширину вправо и влево, чтобы он отображался, иначе будет отображаться ширина по умолчанию. 

tabLineStyle: {
                height: "3px",
                width: "auto",
                backgroundColor: "blue",
                borderRight: "solid blue",
                borderLeft: "solid blue",
                borderRadius: "2px",
                opacity: 1,
                transition: "opacity 200ms;",
                marginTop: "3px",
            }

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

Так выглядит до режима высокой контрастности

И вот как это выглядит в режиме высокой контрастности с кодом, который я вставил в вопрос, так как я добавил границы левого и правого стилей и не указал конкретную ширину:

1 Ответ

0 голосов
/ 30 апреля 2019

Вы можете использовать специальный медиазапрос, чтобы указать другой цвет в режиме высокой контрастности: 

@media screen and (-ms-high-contrast: active) {
    /* your new styling */
}

См .: https://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast/

...