本文介绍了更好的方式来设置跨平台输入文本框的大小?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
更新低于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;
}
<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或某些单位,将跨平台更加一致?
(我会担心摆脱的按钮和其他调整的差距,大小后,我得到了大小排序了)
推荐答案
在回来尝试一些其他的东西,我发现我错了。上述评论是用尺寸=#%
发,但是当你用宽度:#%;
它消除了宽方差跨平台。
这篇关于更好的方式来设置跨平台输入文本框的大小?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!