店舗物件を探すなら

不動産プラグインはとても高機能でよいプラグインです。だけどIE6ではナビゲーションの表示がずれてしまいます。

 
IE6でサイトを表示すると上記の画像のようにナビゲーションの文字がずれてしまいます。本心ではIE6はなくなったらいいのにと思いますが、今でもIE6は、利用されているのでやむなくCSSを変更することにしました。

手順は以下の通りです。

手順1

プラグインのフォルダfudo＞themes＞corners.cssの中にある下記をコピーして消しました。

/* = nav
————————————————————– */

#access {
background: #000; /* old browsers */
background: -moz-linear-gradient(top, #34373A 0%, #000000 93%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34373A), color-stop(93%,#000000)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#34373A’, endColorstr=’#000000′,GradientType=0 ); /* ie */

border-top: 1px solid #4A535D;
border-bottom: 3px solid #D9D9D9;
}

#access a{
min-width:70px;
width: auto !important;
width: 70px; /* min-width最小値 */

text-align: center;
text-shadow: 1px 1px 0px #000;
letter-spacing: 0.1em;
}

手順2

twentytenのcssを見ると以下の箇所があります。

/* =Menu
————————————————————– */

#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #333;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}

手順3

この箇所を下記のコードに書き換えます。

/* = nav
————————————————————– */

#access {
background: #34373A; /* old browsers */
background: -moz-linear-gradient(top, #34373A 0%, #000000 93%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34373A), color-stop(93%,#000000)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#34373A’, endColorstr=’#000000′,GradientType=0 ); /* ie */

border-top: 1px solid #4A535D;
border-bottom: 3px solid #D9D9D9;
}

#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;

}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #FFFFFF;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #0168B7;
border-top: 1px solid #FFFFFF;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
color: #FFFFFF;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #000066;
color: #FFFFFF;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}

/* =IE6MENU
————————————————————– */

#access {
background: #34373A;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access .menu-header,
div.menu {
_font-size: 13px;
_margin-left: 12px;
_width: 928px;
}
#access .menu-header ul,
div.menu ul {
_list-style: none;
_margin: 0;

}
#access .menu-header li,
div.menu li {
_float: left;
_position: relative;
}
#access a {
_color: #aaa;
_display: block;
_line-height: 38px;
_padding: 0 10px;
_text-decoration: none;
}
#access ul ul {
_box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
_display: none;
_position: absolute;
_top: 38px;
_left: 0;
_float: left;
_width: 180px;
_z-index: 99999;
}
#access ul ul li {
_min-width: 180px;
}
#access ul ul ul {
_left: 100%;
_top: 0;
}
#access ul ul a {
_background: #0168B7;
_border-top: 1px solid #FFFFFF;
_line-height: 1em;
_padding: 10px;
_width: 160px;
_height: auto;
_color: #FFFFFF;
}
#access li:hover > a,
#access ul ul :hover > a {
_background: #000066;
_color: #FFFFFF;
}
#access ul li:hover > ul {
_display: block;
}

手順4

上記のコードをfudou/themes/style.cssの最下部にも追加。

 

そうするとIE6でずれていたナビゲーションのずれが解消されます。

ナビゲーションの文字がまともに表示されるようになりました！
すべてのIEでの表示とFirefoxでのナビゲーション表示差異がほとんどないのでとても気持ちが良いです。

注意点

 
※必ずすべてのバックアップをとってから作業をしてください。
※バージョンや環境によって違うかもしれませんので必ず表示がうまくいくとは限りません。
※CSS的には強制的なものです。自己責任でお願い致します。
※もし上記のCSS書き換えをやってみてずれる場合は『IE6 Support for 2010 Theme』というプラグインを試してみてください。