跨平台设置输入文本框大小的更好方法？答案

【问题标题】：Better way to set size of input textbox across platforms?跨平台设置输入文本框大小的更好方法？
【发布时间】：2011-11-24 01:46:44
【问题描述】：

更新位于代码块下方。

原问题： 我有一个远远超出页面其余部分的输入字段，但正如问题所暗示的那样，它在 iOS3/4/5 中看起来很好。

我想知道是否有人遇到过这个问题。我的搜索按钮（在 iOS 中位于搜索文本框的右侧）实际上会换行到其他平台上的下一个“行”。

代码如下：

HTML

<form action="/jsp/mobile_files/results.jsp" method="get" autocorrect="off"     autocapitalize="off">
<h1><input class="keyword_search" type="text" name="keywords" maxlength="50" size="36" value="" /><input type="submit" class="keyword_submit" value="Go" /></h1>
</form>

两个相关的 CSS 类是：

 /* input[type="submit"] */
 .keyword_submit
 {
   background: #666666;  /* grey */
   color: #FFFFFF;  /* white */
   font-weight: bold;
   font-size: 60%;
   line-height: 1.45em; /* 1.45 with 60% font-size */

   margin-left: -4px; /* to do - needs to be -12 for desktop */
   padding-bottom: 1px;


   -moz-border-radius: 10px;       /* for mozilla firefox */

   /* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
   border-radius: 10px;

   /* webkit rounded corners work on iPhone 3G with iOS 3.x */
   -webkit-border-radius: 10px;


   -moz-border-radius-topleft: 0px;      /* for mozilla firefox */
   -moz-border-radius-bottomleft: 0px;

   /* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;

   /* but this does work on iPhone 3G with iOS 3.x */
   -webkit-border-top-left-radius: 0px;
   -webkit-border-bottom-left-radius: 0px;

   /* to do - possible without this??  We lose the gradient! */
   -webkit-appearance: none;
 }

和

/* input[type="text"] */
  .keyword_search {
    background: #F1F1F1;  /* faded white */
    color: #333333;  /* dark */
    font-weight: bold;

    /* to do - looks better on iOS with larger font */
    /*
    font-size: 80%;
    */

    -moz-border-radius: 10px;       /* for mozilla firefox */

    /* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
    border-radius: 10px;

    /* webkit rounded corners work on iPhone 3G with iOS 3.x */
    -webkit-border-radius: 10px;

    margin-left: 0.75em; /* moves entry field to the right */
    padding-left: 0.6em; /* moves text start cursor in the entry field to the right */

    /* for mozilla firefox */
    -moz-border-radius-topright: 0px;      
    -moz-border-radius-bottomright: 0px;

    /* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;

    /* but this does work on iPhone 3G with iOS 3.x */
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
  }

更新问题 截图可见http://i.stack.imgur.com/5f7C8.jpg我会发在这里，但我需要10多个声望才能发布图像。您可以在 Android 图像中看到，如果我的输入的大小对于任何平台都设置得太大，会发生什么情况。为了让它适合 BlackBerry，您可以查看它对 iOS 中呈现的大小的影响。所有三个 img 的大小都设置为相同的值 (="10")...您可以在不同的平台上看到结果。

<input class="keyword_search" type="number" name="job_order_id" maxlength="7" size="10" value="" />
<input type="submit" class="keyword_submit" value="Go" />

关于控制大小的更好方法的建议？我可以使用 %、em、px 或某个跨平台更一致的单位吗？（我会担心在我整理好尺寸后消除间隙，按钮大小和其他调整）

【问题讨论】：

我通过实验发现 % 很糟糕，只是一个数字和 em 彼此相似，而使用 px 是最接近一致的。虽然在 iOS 中仍然更小，但现在我可以让按钮与框匹配起来很有趣。 :c) 如果您有更好的想法，请分享。

标签： android html css ios blackberry

【解决方案1】：

回来尝试其他一些事情时，我发现我错了。上述评论是使用size=#% 进行的，但是当您使用width: #%; 时，它消除了跨平台的广泛差异。

【讨论】：