更好的方式来设置跨平台输入文本框的大小？ [英] Better way to set size of input textbox across platforms?

问题描述

更新低于code块。

原题：
我有一个很好伸出页面的其余部分的输入字段，但随着问题的暗示，它出现在IOS3精细/ 4/5。

Original Question: I have an input field that is extending well beyond the rest of the page, but as the question alludes to, it appears fine in iOS3/4/5.

如果任何人碰到这个问题，我想知道。我的搜索按钮，这在iOS的是在搜索文本框的右侧，居然换到其他平台上的下一个行。

I am wondering if anyone has run into this issue. My search button, which in iOS is on the right of the search textbox, actually wraps to the next "line" on other platforms.

code是如下：

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类是：

The two relevant CSS classes are:

 /* 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）......，你可以看到在不同的平台上的结果。

Updated Question Screenshots can be seen at http://i.stack.imgur.com/5f7C8.jpg I would post it here, but I need more than 10 reputation to post images. You can see in the Android image what happens if the size on my input is set too large for any platform. To make it fit on the BlackBerry, you can see what it does to the size rendered in iOS. All three img's have size set to the same value (="10")... and you can see the result in the different platforms.

<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或某些单位，将跨平台更加一致？
（我会担心摆脱的按钮和其他调整的差距，大小后，我得到了大小排序了）

Suggestions for a better way to control the size? Can I use %, em, px or some unit that will be more consistent across platforms? (I'll worry about getting rid of the gap,size of the button and other tweaks after I get the size sorted out)

推荐答案

在回来尝试一些其他的东西，我发现我错了。上述评论是用尺寸=＃％发，但是当你用宽度：＃％; 它消除了宽方差跨平台。

When coming back to try a few other things, I notice that I was mistaken. The above comment was made using size=#%, but when you use width: #%; it eliminates the wide variance across platforms.

这篇关于更好的方式来设置跨平台输入文本框的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！