IE10で見るとトップのメニュー部分が違う
-
こんにちは、IE10でのナビメニューの不具合を確認しました。
ページ幅、fluidの場合、ブラウザ幅640px近傍で、メニューのスタイルが変更になりますが、これ以下のブラウザ幅にした場合、スクロールバーがついて、レイアウトがおかしくなる事が確認できたのですが、この現象の事をおっしゃっていますか?
イエスなら、お手数ですが、functions.php の
290行目
if ( $is_IE ) { preg_match( "|(MSIE )([0-9])(\.)|si", $_SERVER['HTTP_USER_AGENT'], $regs ); if ( $regs[2] < 9 ) { $raindrops_fluid_minimum_width = '640'; } }
を
if ( $is_IE ) { preg_match( "|(MSIE )([0-9]{1,2})(\.)|si", $_SERVER['HTTP_USER_AGENT'], $regs ); if ( $regs[2] < 9 ) { $raindrops_fluid_minimum_width = '640'; } }
[0-9]を[0-9]{1,2}に変更
また、612行目
switch( true ) { /* 略*/ case( $is_IE ): preg_match( " |(MSIE )([0-9])(\.)|si", $_SERVER['HTTP_USER_AGENT'], $regs ); $classes[] = 'ie'.$regs[2]; break; /* 略*/ }
を
switch( true ) { /* 略*/ case( $is_IE ): preg_match( " |(MSIE )([0-9]{1,2})(\.)|si", $_SERVER['HTTP_USER_AGENT'], $regs ); $classes[] = 'ie'.$regs[2]; break; /* 略*/ }
同様に変更してください。
このバグは、Raindrops.1.114で修正予定です。
( 1.113までは、既にレビュー申請中のため )もし、この件でなければ、
ページ幅、カラータイプと、どのような現象が発生しているのか、もう少しだけ具体的に教えてください。
テーマをご利用いただきありがとうございます
ご連絡いただきありがとうございます。
若干、状況が違う気がします。文章では説明が難しいのでメニュー部分の画像をリンクしました。
通常の場合→http://nonfiction-j.com/wp-content/uploads/googlechrome.png
IE10の場合→ttp://nonfiction-j.com/wp-content/uploads/ie10.pngページ幅は950pixを利用しています。
カラータイプはlightです。
よろしくお願いします。画像とてもわかりやすかったです ありがとうございます。
前回お知らせした、バグの修正を行ったうえで、
lib/csscolor.css.phpの、1315行近傍の 以下のスタイル指定を見つけてください
#access .children li:active >a, #access li:active >a , #access ul ul :active >a{ background: -webkit-gradient(linear, left top, left bottom, from(%custom_light_bg%), to(%custom_dark_bg%))!important; background: -moz-linear-gradient(top, %custom_light_bg%, %custom_dark_bg%)!important; /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='%custom_light_bg%', endColorstr='%custom_dark_bg%');*/ color:%custom_color%; }
このスタイルルールの直後に、以下のルールを貼り付けてみてください
.ie10 #access{ background-image: -ms-linear-gradient(top, %custom_dark_bg%, %custom_light_bg%)!important; } .ie10 #access a { background-image: -ms-linear-gradient(top, %custom_dark_bg%, %custom_light_bg%); } .ie10 #access .children li:active >a, .ie10 #access li:active >a , .ie10 #access ul ul :active >a{ background-image: -ms-linear-gradient(top, %custom_light_bg%, %custom_dark_bg%); }
動作確認が出来ましたら、
( テーマオプションパネルで、カラータイプを、他のもの「ダーク」とかに切り替えて、再度、lightに戻して、読み直しが必要です。)チャイルドテーマを作成してください(アップデートの時に、元に戻るので)
childrainというホルダを、raindropsと同じ階層に作成
その中に、libというホルダを作成、
更にその中に、csscolor.css.phpを作成し、先ほどの、
csscolor.css.phpの内容をペーストしてください。次に、childrainホルダの直下に、style.cssを作ってください。
内容は、
/* Theme Name: childrain Theme URI: http://www.tenman.info/wp3/raindrops/ Description: Child theme Raindrops IE10 customize. Author: Tenman Author URI: http://www.tenman.info/ Version: 0.401 Template: raindrops Template Version: 0.1 License: GNU General Public License v2.0 License URI: http://www.gnu.org/licenses/gpl-2.0.html */
テーマ名と、テンプレートの項目以外は、書き換えてください
:
の後には、スペースを一つ入れてください(無いと、読み込みエラーになります)このコメントだけでいいです。(一般的なchildテーマの解説だと、@import()を追加するような解説がありますが、raindropsは、スタイルを、自動的にインポートします。)
十分なテストを行っていないので、動作確認よろしくお願いします。
今後のアップデートの時に、この機能を組み込んでみようかなとも、思っていますが、今の時点で確約は出来ないので、手の込んだ事になってすみません。
詳細にご説明いただき大変有り難うございます。この修正は自分にはハードルが高そうなので、少し時間をかけてトライしてみます。どうしても上手くいかない時は、再度、ご質問させていただくかもしれません。また、修正が完了した際は、動作確認などご報告させていただきます。ので、トピックはしばらく継続しておこうと思います。よろしくお願いします。
functions.php を見たところ、
`if ( $is_IE ) {
preg_match( “|(MSIE )([0-9])(\.)|si”, $_SERVER[‘HTTP_USER_AGENT’], $regs );
if ( $regs[2] < 9 ) {
$raindrops_fluid_minimum_width = ‘640’;}
}`が見当たらず。似ている表記として
`if($is_IE){
preg_match_all(‘#(<img)([^>]+)(height|width)(=”)([0-9]{1,2}}]+)”([^>]+)(height|width)(=”)(0-9]{1,2}]+)”([^>]+)>#’,$content,$images,PREG_SET_ORDER);~`があったので、上記のように修正しましたが、サイトに変化はありませんでした?ご指摘のコードが見当たらない理由はよくわかりません。
あと、「childrainホルダの直下」というのは、libホルダと同じ階層という理解でよいのでしょうか?
お手数かけますが、教えていただけると助かります。
よろしくお願いします。こんにちは、
「 MSIE 」をキーワードにして functions.php 内を検索してみていただけますか?
libホルダと同じ階層という理解でよいのでしょうか?
はい
お手数をおかけします
「MSIE」をキーワードにしてfunctions.php 内を検索したところ、該当箇所は下記の1カ所のみでした。
`break;
case($is_IE):
preg_match(” |(MSIE )([0-9]{1,2}])(\.)|si”,$_SERVER[‘HTTP_USER_AGENT’],$regs);
$classes[] = ‘ie’.$regs[2];`重ねて恐縮です。よろしくお願いします。
GithubにあるRaindropsの、functions.phpで場所をお知らせします。
https://github.com/tenman/raindrops/blob/master/functions.php#L291
291 行
https://github.com/tenman/raindrops/blob/master/functions.php#L618
618 行にあります
- トピック「IE10で見るとトップのメニュー部分が違う」には新たに返信することはできません。