2


0

IE7がこのCSSでリストアイテムの下部を切り捨てているのはなぜですか?

ちょっと迷惑なIE7のバグがあり、それを解決しようとしています。 リスト項目の下部が切り取られています:

これがCSSです。

/* begin buttons */

ul.buttons { /* general settings */
margin-left: 0;
margin-bottom: 0em;
margin-right: 0;
margin-top: .0em;
float: left;
height: 23px;
text-shadow: 0px 0px;
text-align: left; /* set to left, right or center */ /* set margins as desired */ /* set font as desired */
list-style-type: none; /* THIRD number must change with respect to padding-top (X) below */
}

ul.buttons li { /* do not change */
display: inline;
height: 35px;
}

ul.buttons li img {
margin-right: 7px;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul.buttons li a { /* settings for all tab links */
border-bottom-color: #4c9a01;
border-bottom-width: 1px;
border-bottom-style: solid;
letter-spacing: .1em;
color: white;
padding-left: 8px;
padding-bottom: 4px;
padding-right: 8px;
padding-top: 5px;
font-size: .75em; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */ /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #94c909; /* set unselected tab background color as desired */ /* set unselected tab link color as desired */
margin-right: 8px; /* set additional spacing between tabs as desired */
text-decoration: none;
}

そしてhtml:

  Dashboard
  My Leases
  Guide

私はこれをグーグルで検索しましたが、解決策を見つけることができません、アイデアはありませんか?

3 Answer


4


li`要素は ul`要素の高さ(23px)で切り取られているように見えます:

ul.buttons { /* general settings */
margin-left: 0;
margin-bottom: 0em;
margin-right: 0;
margin-top: .0em;
float: left;
height: 23px;  /* <--- here */
text-shadow: 0px 0px;
text-align: left; /* set to left, right or center */ /* set margins as desired */ /* set font as desired */
list-style-type: none; /* THIRD number must change with respect to padding-top (X) below */
}

ほとんどの場合、デフォルトの「オーバーフロー」値はIEとFirefoxで異なります。 li`要素の ul`の高さを `35px`の高さに増やすことはできますか?

'' '' '

  • rohancragg *は、CSSリセットファイルを使用してブラウザのCSSのデフォルトを正規化することをお勧めします(http://meyerweb.com/eric/tools/css/reset/)。

'' '' '

私はあなたの li`要素に display:inline; `を見つけました。 「height」は「inline」要素では無視されるため、代わりに「inline-block」を使用する必要があります。


1


まず、http://www.microsoft.com/downloads/details.aspx?FamilyID = e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang = en [IE Development Tools]をインストールします。 Fire Bugに似ており、その場でCSSを変更できます。

次に、ライブサイトのCSSを変更して問題を見つけます。

第三に、CSSを変更してFirefoxでテストします。 それでもFirefoxで問題がなければ、次のようにCSSでIF IEステートメントを作成します。



0


最初の推測は、あるブラウザが「ul」の高さを無視し、「li」の高さを使用していることです。 「ul.buttons li」よりも「ul.button」の高さを小さく指定する必要があるのはなぜですか?