Heaber back button issue/bug in IE

Heaber back button issue/bug in IE

I have a Back button in my jQM app header. It had an issue not aligning with Header text in IE11 so I added some CSS style =" margin : .5em 0 ; " Now I test my app in Chrome and this code makes back button to move lower. If I remove it Chrome shows button correctly.


< a data-role ="button" data-control-type ="panelbutton" class ="ui-btn-left" data-theme ="h" data-rel ="back" href ="#mainPage" data-icon ="arrow-l" data-inline ="true" data-iconpos ="notext" data-position ="left" style =" margin : .5em 0 ; "> back

</ a



>


I use <h3> tag for header text

< div data-role ="page" data-control-title ="My Header" data-theme ="f">


< div data-theme ="f" data-role ="header"                                                        data-position ="fixed">


< a data-role ="button" data-control-type ="panelbutton" class ="ui-btn-left" data-theme ="h" data-rel ="back" href ="#mainPage" data-icon ="arrow-l" data-inline ="true" data-iconpos ="notext" data-position ="left" style =" margin : .5em 0 ; "> back </ a >


< h3 >

My Header


</ h3 >


</ div >


How do I fix it in IE11? Why it has a gap in first place?