このCSSをIE8で正しく表示するにはどうすればよいですか？

Question

あまりにも多くのコードを投稿する必要はありません：http://www.ketchikanvet.com。問題はIE8のペインにタブを付けることができないことです。ほとんどの獣医クライアントはIE8を使用しているように見えるので、これは私にとって痛いものです。誰でも知っている理由は？ CSSは次のとおりです。

html { 
    margin: 0; 
    padding: 0; 
} 

body { 
    width: 100%; 
    text-align: center; 
    margin: 0; 
    padding: 0; 
    background-color: #17BFEE; 
    color: #111111; 
    font-family: Arial, sans-serif; 
} 

h1 { 
    margin: 0; 
    font-family: 'Marmelad', sans-serif; 
    font-size: 5em; 
    color: #111111; 
    text-shadow: 0px 2px 3px #efefef; 
} 

#header { 
    text-align: center; 
    margin-top: 10px; 
    margin-bottom: 30px; 
} 

#content { 
    text-align: left; 
    margin: 0 auto; 
    width: 70%; 
} 

/* root element for tabs */ 
ul.tabs { 
    margin:0 !important; 
     margin-bottom: 0; 
    padding:0; 
    height:30px; 
} 

/* single tab */ 
ul.tabs li { 
    float:left; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
} 

/* link inside the tab. uses a background image */ 
ul.tabs a { 
    float:left; 
    font-size:13px; 
    display:block; 
    padding:5px 30px; 
    text-decoration:none; 
    border:2px solid #001401; 
    border-bottom:0px; 
    height:18px; 
    background-color:#ddd; 
    color:#000; 
    margin-right:2px; 
     margin-bottom: 0; 
     position:relative; 
    outline:0; 
    border-radius:5px 5px 0 0; 
} 

ul.tabs a:hover { 
    background-color:#F7F7F7; 
    color:#000; 
} 

/* selected tab */ 
ul.tabs a.current { 
    background-color:#F0F0FF; 
    border-bottom:2px solid #F0F0FF;  
    color:#000; 
    cursor:default; 
} 


/* tab pane */ 
.panes div { 
    display:none; 
    border:2px solid #001401; 
    min-height:150px; 
    padding:15px 20px; 
    background-color:#F0F0FF; 
     border-radius: 0 5px 5px 5px; 
     box-shadow: 1px 1px 8px #C4C4C4; 
} 

/*End of Tabs*/ 

#gallery img { 
    border: 2px solid #001401; 
    border-radius: 5px; 
    margin-right: 5px; 
} 

#gallery img:hover { 
    border: 2px solid #494949; 
} 

#footer a { 
    color: #111111; 
    text-decoration: none; 
} 

#footer a:hover { 
    color: #efefef; 
} 

#addhours { 
    width: 100%; 
} 

#addhours td { 
    width: 50%; 
} 

.clear { 
    clear: both; 
} 

a { 
    text-decoration: none; 
    color: #890224; 
} 

a:hover { 
    text-decoration: none; 
    color: #890224; 
} 

a:visited { 
    text-decoration: none; 
    color: #890224; 
} 

.falselink { 
    cursor: pointer; 
} 

.bioimage { 
    box-shadow: 1px 1px 8px #C4C4C4; 
    border: 2px solid #001401; 
    border-radius: 10px; 
} 

.photo { 
    box-shadow: 1px 1px 8px #C4C4C4; 
    border: 2px solid #001401; 
    border-radius: 10px; 
} 

#browsercheck { 
    color: #ff0000; 
} 

Answer 1

はUL.tabs A

border-bottom-color:rgb(221, 221, 221); 
border-bottom-style:solid; 
border-bottom-width:2px; 

Answer 2

に追加私はul.tabsの内側にあなたのアンカーに32PXの高さを追加し、あなたが探しているもののようでした。

ul.tabs a {height:32px;} 

html5ボイラープレートを使用している場合は、ターゲットを単独で使用できます。

.ie8 ul.tabs a {height:32px;}