Display slightly off in IE with TabContainer

I'm trying to make some changes in the tab container to increase the size of the text in the tab panels.  I have the following code.  the problem is shown in the image below.  You can see how the image is just a little off and the lines don't meet up.  I've circled the appropriate spots.  It is as if the headers have been moved a couple of pixels above where they are supposed to be.  I am guessing that this is because of the lowercase 'y' extending downward.  I'm looking for any thoughts on removing those few pixels and having things line up as they are supposed to.  TIA

My current css:

.MyTableStyle .ajax__tab_header:after {
    clear: both;
}

.MyTableStyle .ajax__tab_header:before, .MyTabStyle .ajax__tab_header:after {
    content: "";
    display: table;
}

.MyTabStyle .ajax__tab_header {
    font-family: "Helvetica Neue", Arial, Sans-Serif;
    font-size: 30px;
    font-weight: bold;
    display: inline-block;
}

.MyTableStyle .ajax__tab_tab {

}

.MyTabStyle .ajax__tab_header .ajax__tab_outer {
}

.MyTabStyle .ajax__tab_header .ajax__tab_inner {
    font-size: 15px;
}

.MyTabStyle .ajax__tab_hover .ajax__tab_outer {
}

.MyTabStyle .ajax__tab_hover .ajax__tab_inner {
}

.MyTabStyle .ajax__tab_active .ajax__tab_outer {
}