HTML вверх и вниз значок выглядит иначе, во всех браузерах

-1

Это мой jsfiddle:HTML вверх и вниз значок выглядит иначе, во всех браузерах

<div class="jqx-splitter-collapse-button-horizontal jqx-fill-state-pressed jqx-splitter-collapse-button-hover jqx-fill-state-hover" style="height: 13px; width: 32px; position: relative; z-index: 10; left: 50%; top: 11px; margin-top: -1px; margin-left: -16px; line-height: 0px; color: rgb(169, 167, 167); border-width: 0px 1px 1px; border-color: rgb(153, 153, 153); border-style: solid; border-radius: 0px 0px 4px 4px; font-size: 40px; text-align: center;">⌄</div> <br/><br/><br/> 

<div class="jqx-splitter-collapse-button-horizontal jqx-fill-state-pressed jqx-splitter-collapse-button-hover jqx-fill-state-hover" style="height: 11px; width: 32px; position: relative; z-index: 10; left: 50%; top: -11px; margin-top: -1px; margin-left: -16px; line-height: 0px; color: rgb(169, 167, 167); border-width: 1px 1px 0px; border-color: rgb(153, 153, 153); border-style: solid; border-radius: 4px 4px 0px 0px; font-size: 40px; text-align: center;">⌃</div>

Даже если все стили же еще, если Вы рассматриваете это в разных браузерах они выглядят по-разному во всем.

Может ли кто-нибудь предложить, в чем проблема?

Вот как это выглядит в Firefox последней версии: https://gyazo.com/e843e93d90e4410b093a57f4f4fa2cd8

Вот как это выглядит в Chrome: https://gyazo.com/23d6fddb1ba7b3794f5cfa71588896f6

источник

2015-09-19 Jack

Некоторые браузеры отображают текст по-разному. Взгляните на это: http://stackoverflow.com/questions/5082632/same-font-yet-its-weight-seems-different-on-different-browsers – MortenMoulder

Пожалуйста, покажите, как это должно выглядеть и как оно выглядит иначе , Какой браузер показывает это неправильно? И, пожалуйста, не используйте встроенные таблицы стилей. – JavaForAndroid

@Snorlax Это не проблема с браузерами, а с объектами, используемыми для отображения стрелок и некоторых настроек стиля. Вы можете увидеть [Демо] (http://jsfiddle.net/tusharj/73rqv02t/4/). Также см. Предыдущий вопрос от Джека http://stackoverflow.com/questions/32664243/up-and-down-arrow-unicode-font-size-issue/32664266#32664266 – Tushar

Изменить высота линии: 30px, и, пожалуйста, не используйте встроенный стиль.

.demo-top { 
 
    height: 13px; 
 
    width: 32px; 
 
    position: relative; 
 
    z-index: 10; 
 
    left: 50%; 
 
    top: 11px; 
 
    margin-top: -1px; 
 
    margin-left: -16px; 
 
    line-height: 0px; 
 
    color: rgb(169, 167, 167); 
 
    border-width: 0px 1px 1px; 
 
    border-color: rgb(153, 153, 153); 
 
    border-style: solid; 
 
    border-radius: 0px 0px 4px 4px; 
 
    font-size: 40px; 
 
    text-align: center; 
 
} 
 
.demo-bottom { 
 
    height: 11px; 
 
    width: 32px; 
 
    position: relative; 
 
    z-index: 10; 
 
    left: 50%; 
 
    top: -11px; 
 
    margin-top: -1px; 
 
    margin-left: -16px; 
 
    line-height: 30px; 
 
    color: rgb(169, 167, 167); 
 
    border-width: 1px 1px 0px; 
 
    border-color: rgb(153, 153, 153); 
 
    border-style: solid; 
 
    border-radius: 4px 4px 0px 0px; 
 
    font-size: 40px; 
 
    text-align: center; 
 
}

<div class="demo-top">⌄</div><br /><br /> 
 
<div class="demo-bottom">⌃</div>

источник

2015-09-19 05:38:39

Вы видите стрелки, запустив свой код, они не выглядят proporitonate – Tushar

HTML вверх и вниз значок выглядит иначе, во всех браузерах

ответ

Смежные вопросы