黑莓中的HTML输入根据其类型具有不同的宽度 [英] HTML inputs in Blackberry have different width depending on their type
本文介绍了黑莓中的HTML输入根据其类型具有不同的宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
输入样式 width:100%;类型
比我在黑莓中测试下面的代码类型数字
或日期
的框大小:border-box; text
的那些。我已经检查它的模拟器9380,9810和9850和在9810设备。
Inputs with styles width: 100%; box-sizing: border-box;
of type number
or date
have a different width than the ones of type text
when I test the following code in Blackberry. I have checked it for simulators 9380, 9810 and 9850 and in 9810 device.
<style type="text/css">
#inputsTest {
border: 1px solid red;
margin: 15px;
}
#inputsTest input {
border: 1px solid green;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<div id="inputsTest">
<label for="test1">Text</label>
<input id="test1" type="text"/>
<label for="test2">Number</label>
<input id="test2" type="number"/>
<label for="test3">Date</label>
<input id="test3" type="date"/>
</div>
这是一个来自Firefox的屏幕截图:
This is a screen capture from Firefox:
这是它在黑莓中的外观(宽度差异是可见的在红色圆圈中):
And this is how it looks in Blackberry (the width difference is visible in the red circles):
代码也可以在这里: http://jsfiddle.net/GXfXG/5/
推荐答案
I have solved this issue adding this CSS, thanks to this answer and this:
input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
这篇关于黑莓中的HTML输入根据其类型具有不同的宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文