在 Retina 显示器上设置 CSS 以实现一致的 textarea 定位答案

【问题标题】：Setting CSS for consistent textarea positioning on Retina Displays在 Retina 显示器上设置 CSS 以实现一致的 textarea 定位
【发布时间】：2016-05-12 01:30:42
【问题描述】：

我的问题有两个。首先，this page 上的文本区域与when displayed on a Retina Display 重叠。如何修改 HTML/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>

【问题讨论】：

您通常可以通过简单地使用浏览器缩小来模拟高密度显示。但是，在这种情况下不会重现问题。他们在视网膜显示器上使用什么浏览器？顺便说一句，我可以通过调整输入框的大小来使字段重叠。你确定给你发屏幕截图的人没有这样做吗？
他们在 Safari 和 Chrome 上都看到了重叠。我不能肯定他们没有调整输入框的大小，但我不相信他们是。

标签： html css textarea retina-display

【解决方案1】：

这里没有灵丹妙药，但减少重叠字段的宽度会产生最大的影响。从那里它是 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>

【讨论】：