jquery/jquery-mobile — Issue #2880: Header padding/formatting when placing button container in left button position
Author: begmandev
Created: 2011-10-28 19:58:32+00:00
State: open

When I place header buttons in div containers (I'm doing this so I can add more than one button to the left and right positions) and apply the ui-btn-left and ui-btn-right classes to those div containers to position them appropriately in the header, the padding on the page is thrown off when running in IE 7 or IE 7 standards mode.

This only seems to be a problem when I add the left button(s) into my own container. If only add a single left button as a standard anchor without a wrapping container and put multiple right buttons in my own div container, the header formatting appears fine.

Below is a jsbin that exhibits the issue. Please note that I'm specifically setting X-UA-Compatible to IE=EmulateIE7 in this example to cause the document to run in IE 7 standards mode.

http://jsbin.com/epigop

As you might expect, one can work around this problem in IE 8 and later just by setting X-UA-Compatible to IE=Edge.