I have an HTML form with a bunch of input fields (of type text and select). I am floating them such that there are two on each row. In all browsers (including IE7), everything works okay, but for some reason in IE8, whenever I click inside any of the fields or their labels, that field or a surrounding one vertically moves up or down. The position then returns to normal once I click away from the box, though then another nearby box might move. Also, not all of the textbox fields have this issue, and clicking the same textbox doesn't always cause this issue. Any ideas?
I had the exact same problem, and to fix it, I set
display:block
On the element that was jumping around and that fixed it. Hope that helps.
Problem is when you focus an input text element, your browser puts 2px border around it for focus which is shifting its position if it is contained in a tight container...
I think it is more related to having 2px border all the times. Use the same color border and your text field to have transparent borders... Your problem is addressed on this question
StackOverflow Question when focusing an input field border 8270380
This is speculation, but since focusing in an element seems to trigger the shifting, you may have different styles applied to those focused elements. Increased margins or borders could be responsible.
I think your structure conflicting with your parent structure CSS (there may possible is you using third party plugin something like jQuery UI or else) do one thing just for confirmation cut or copy your conflicting code and paste out side of you parent structure or beginning of your body tag. you find the difference.
For proper help I want to review you code. Thnx
来源：https://stackoverflow.com/questions/11823842/why-do-my-html-form-elements-move-around-when-clicking-on-them-in-ie8