Блог

Главная - Вопросы по программированию - Разница в результатах между браузерами для преобразования на правом краю страницы

Разница в результатах между браузерами для преобразования на правом краю страницы

#css #css-transforms

#css #css-преобразования

Вопрос:

Я сталкиваюсь с различием, когда дело доходит до преобразования текста на правом краю страницы. Кажется, Chrome (слева) и Firefox (справа) не согласны с правильным поведением:

Разница

это преобразование:

 'style': {'transform': 'rotate(-90deg) translateY(-305%)','transformOrigin': 'right top', 'textAlign': 'left'}
  
 element.style {
    transform: rotate(-90deg) translateY(-305%);
    left: 99.3471%;
    transform-origin: right top;
    text-align: left;
}
<style>
.rc-slider-mark-text-active {
    color: #666;
}
<style>
.rc-slider-mark-text {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    color: #999;
}
<style>
.rc-slider * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

^ Один из элементов ведет себя по-другому.

Есть мысли по исправлению поведения слева? Заранее спасибо.

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

1. можете ли вы привести нам полный пример? есть ли у родителя position: relative ?

2. Отредактировано, чтобы добавить больше деталей к элементам css.

Ответ №1:

Похоже, что настройка ширины для соответствия содержимому устранила проблему.