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

原题： 我有一个很好超出了页面的其余部分的输入字段，但因为这个问题提到了，它出现在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图像中看到如果我的输入尺寸对任何平台而言设置得太大，会发生什么情况。为了使它适合黑莓手机，你可以看到它对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或某个单位在整个平台上更一致吗？（我会担心摆脱间隙，按钮的大小和其他调整后，我得到的大小）

来源

2011-11-24 Dallas

我已经通过实验发现％很糟糕，只是一个数字和em彼此相似，并且使用px是最接近的一致。尽管如此，iOS仍然比较小，现在我开始让按钮与盒子相匹配。：c）如果你有更好的想法，请分享。 – Dallas

当回来尝试一些其他的事情，我注意到我错了。以上评论是使用size=#%制作的，但是当您使用width: #%;时，它消除了跨平台的广泛差异。

来源

2011-12-13 03:25:32 Dallas

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

回答

相关问题