設置CSS在Retina顯示屏上保持一致的textarea定位

我的問題有兩方面。首先，this page上的文本區域重疊when displayed on a Retina Display。如何修改HTML/CSS以在Retina低分辨率顯示上獲得一致的間距？設置CSS在Retina顯示屏上保持一致的textarea定位

其次，我自己沒有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顯示屏上保持一致的textarea定位

回答

相關問題