Question

我的问题是双重的。首先，this page上的文字区域重叠when displayed on a Retina Display。如何修改HTML / CSS以在Retina低分辨率显示屏上获得一致的间距？

其次，我自己没有Retina显示屏。我无法通过自定义Chrome或FF上的像素比来重现问题。还有其他选项可以让我在屏幕截图中重现结果吗？

＆＃34;客户＆＃34;的html和CSS文本区域和相邻容器的CSS如下：

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

Answer 1

这里没有银弹，但减少重叠区域的宽度影响最大。从那里它是CSS调整的组合，包括用纯文本和边距调整替换textarea标签。

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

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

1 个答案: