Text-box width different between IE / FF / Chrome - Causing issues when textbox is filled with 'W's

问题

We have an application that has a text field with a specified length - 4.

Chrome: Chrome Firefox: Firefox

Is there a way force Firefox / IE to use fixed-width spacing? This is an issue in the case of ID numbers, where the field is actually accepting the full input, but by default not displaying the full width (potentially causing user error if they are typing the field from the screen rather than copy/pasting).

回答1:

Instead try changing size attribute to 5. So in all browsers, it will fit.

<input size="5" maxlength="4" value="WWWW" id="txt">

回答2:

Try this CSS sector rule

#elementId
{
    letter-spacing: 5px;
}

.elementClass
{
    letter-spacing: 5px;
}

回答3:

Instead of using size attribute try pure CSS. E.g. this

<input type="text" value="WWWW" id="txt">

#txt{
    font-family: Courier New;
    font-size: 15px;
    width:40px;
}

should look about the same in all browsers.

回答4:

HTML

<input size="4" maxlength="4" value="WWWW" id="txt">

CSS

#txt{
    font-family: Courier New;
    font-size: 15px;
}

DEMO

http://jsfiddle.net/pePXB/1/

It's a "combination" of some of the things suggested by others... I played around in jsfiddle with this for a bit using Internet Explorer, Firefox, and Chrome, and this combo seems to work the best for me, and provides consistent results across browsers.

回答5:

I would recommend the following code No matter which font family you use, It will make the textbox of specified character width.

HTML Code

<input size="4" maxlength="4" value="WWWW" id="txt">

CSS Code

#txt{
    width:4em;
}

This will always make the textbox equal to the width of 4 "M"s so it gives you safe room to use any 4 characters in the box.

For more clarification on using various systems to set width, follow the following link.

http://www.webmasterworld.com/forum83/5001.htm

回答6:

you don't need to worry about the code, but please check with fonts that you have listed for TEXTBOX are available in both browsers ?

I believe this is what making the difference.

回答7:

Try to set the width of the input element and just retain the values for size and maxlength attributes. It will have the same length all throughout the different kinds of browsers but still have different rendering.

input {
     width: 50px;
     padding: 5px;
}

回答8:

make some little bit of css in your input text like

HTML

<input type="text" class="blabla">

CSS

.blabla{
width: 100px;
}

Dont forget to add px after you type size on your CSS.

来源：https://stackoverflow.com/questions/19100783/text-box-width-different-between-ie-ff-chrome-causing-issues-when-textbox

标签

html

cross-browser