Настройка CSS для позиционирования текстового поля на дисплеях Retina

Моя проблема в два раза. Во-первых, текстовые области на this page перекрываются when displayed on a Retina Display. Как изменить HTML/CSS, чтобы получить согласованное расстояние на дисплеях Retina ниже res?Настройка CSS для позиционирования текстового поля на дисплеях Retina

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

HTML и CSS для текстовых областей «Клиента» и CSS для прилегающей контейнеры следующим образом:

.id_fields { 
 
    width: 150px; 
 
    margin-left: 2px; 
 
    margin-right: 2px; 
 
} 
 
.cp_company { 
 
     position:absolute; 
 
     width:130px; 
 
     height:30px; 
 
     margin-right: 20px; 
 
     margin-bottom: 40px; 
 
     overflow: auto; 
 
     font-family: sans-serif; 
 
     font-size: small; 
 
     color: #000000; 
 
    } 
 
    .container { 
 
     width:160px; 
 
     height:150px; 
 
     margin-left: 20px; 
 
     margin-right: inherit; 
 
     padding-left:auto; 
 
     Padding-right:auto; 
 
     display:inline-block; 
 
    }

<div class="id_fields" style="display:inline-block;"> 
 
    <a for="title" style="width: 130px; font-size: small; justify-content: center; display: flex; margin-bottom: 29px; margin-top: 89px;">Customer </a> 
 
    <textarea class="cp_company" style="margin-top: -116px; margin-bottom: 0px;" name="cust_fullfillment_company" placeholder="Company"></textarea> 
 
    <textarea class="cp_company" style="margin-top: -76px;" name="cust_fullfillment_name" placeholder="Name"></textarea> 
 
</div>

источник

2016-05-12 Rob Mathewson

Обычно можно имитировать дисплей высокой плотности, просто уменьшение масштаба с помощью браузера. Однако в этом случае это не будет воспроизводить проблему. Какой браузер они используют на экране сетчатки? Кстати, я могу получить поля для перекрытия, изменив размер полей ввода. Вы уверены, что люди, которые отправили вам снимок экрана, не делали этого? –

Они видят перекрытие как на Safari, так и на Chrome. Я не могу сказать точно, что они не изменяли размеры входных полей, но я не верю, что они были. –

Нет серебряную пули здесь, но уменьшение ширины перекрывающихся полей оказал наибольшее влияние. Оттуда это была комбинация настроек CSS, включая замену метки textarea на простой текст и корректировки полей.

.id_fields{ 
 
     display: inline-block; 
 
     width: 100px; 
 
     margin-left: 2px; 
 
     margin-right: 2px; 
 
     margin-top: -45px; 
 
    } 
 
    .cp_company { 
 
     position:absolute; 
 
     width:80px; 
 
     height:30px; 
 
     margin-right: 10px; 
 
     margin-bottom: 40px; 
 
     overflow: auto; 
 
     font-family: sans-serif; 
 
     font-size: small; 
 
     color: #000000; 
 
    } 
 
.cust_name { 
 
    display:inline-block; 
 
    width:130px; 
 
    height:30px; 
 
    margin-bottom: 40px; 
 
    overflow: auto; 
 
    font-family: sans-serif; 
 
    line-height: 1.5em; 
 
    color: #000000; 
 
    } 
 
    .cp_label { 
 
     text-align:center; 
 
     font-size:small; 
 
     padding-left:13px; 
 
     padding-right: 18px; 
 
    }

<div class="id_fields" style="margin-left:30px;"> 
 
        <textarea class="cp_company" style="margin-top: -72px; margin-bottom: 0px;"name="cust_fullfillment_company" placeholder="Company"></textarea> 
 
        <textarea class="cp_company" style="margin-top: -34px;"name="cust_fullfillment_name" placeholder="Name"></textarea> 
 
        <a class="cp_label">Customer</a> 
 
        </div>

источник

2016-05-13 22:03:24

Настройка CSS для позиционирования текстового поля на дисплеях Retina

ответ

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