| 前のトピックを表示 :: 次のトピックを表示 | 
	
	
		| 投稿者 | メッセージ | 
	
		| coil 未登録ユーザー
 
 
 
 
 
 
 | 
			
				|  日時: 2008/05/21 (Wed) 16:16     記事の件名: PukiWiki(Inside PC-88VA)の表示 |   |  
				| 
 |  
				| ココに書いて良いものかどうか迷ったのですが・・ 邪魔な場合はトピックを削除してください。
 
 私はMac+Safariで閲覧しているのですが
 ・Inside PC-88VA内のコード部分について、フォントのキャラクタ幅の問題で正しく見ることが出来ません。
 ・IEデフォルトの問題なのですが。それ以外のブラウザで文字が小さく表示されてしまいます。
 
 もし宜しければwiki内のファイル「skin/pukiwiki.css.php」の以下の所を書き換えて貰えないでしょうか。IEでの表示は変わらないようにしているのですがもしIEの環境でおかしくなる場合は消してくださいね。一行目は「@charset "iso-8859-1";」のままです
 
 「blockquote」と「body,td」の間に以下を記述
 
 
  	  | Code: |  	  | /*追加(フォントサイズをIEに合わせる)*/
 html{/*IE以外*/
 font-size: 16px;
 }
 * html{/*IE4〜6ハック*/
 font-size: 1em;
 }
 *:first-child+html {/*IE7ハック*/
 font-size: 1em;
 }
 /*追加ここまで*/
 
 | 
 
 「pre」と「img」の間に以下を記述
 
 
  	  | Code: |  	  | /*追加(コードを全ブラウザで等倍にする)*/
 pre {/*IE以外*/
 font-size: 12px;
 font-family: OSaka-mono,mono-spac;
 }
 * html pre {/*IE4〜6ハック*/
 font-size: 1em;
 font-family: mono-spac;
 }
 *:first-child+html pre {/*IE7ハック*/
 font-size: 1em;
 font-family: mono-spac;
 }
 /*追加ここまで*/
 
 | 
 
 IE7ハック部は入らないのかも知れません。
 |  | 
	
		| トップに戻る |  | 
	
		|  | 
	
		| coil 未登録ユーザー
 
 
 
 
 
 
 | 
			
				|  日時: 2008/05/21 (Wed) 16:55     記事の件名: 訂正・・ |   |  
				| 
 |  
				| 2つ目のスタイルは間違ってました・・ FireFoxでも等倍表示にしますのでそちらの方も見やすくなると思います。
 
 
  	  | Code: |  	  | /*追加(コードを主要ブラウザで等倍にする)*/
 pre {/*IE以外*/
 font-size: 14px;
 font-family: osaka-mono,monospace;
 }
 * html pre {/*IE4〜6ハック*/
 font-size: 1em;
 font-family: monospace;
 }
 *:first-child+html pre {/*IE7ハック*/
 font-size: 1em;
 font-family: monospace;
 }
 /*追加ここまで*/
 
 | 
 |  | 
	
		| トップに戻る |  | 
	
		|  | 
	
		| Shinra 
 
 
 登録日: 2005.05.22
 記事: 138
 
 
 | 
			
				|  日時: 2008/05/23 (Fri) 23:35     記事の件名: |   |  
				| 
 |  
				| 改善案をありがとうございます。 
 IE4-6, IE7, それ以外、の3とおりそれぞれについて
 スタイルを指定することで、それぞれ等幅フォントで
 表示させるようにする、ということなのだと思いますが、
 
 CSSには詳しくないもので、もしよろしければ、
 提示していただいた記述で3とおりのブラウザを区別
 してスタイルを指定可能となる原理を簡単に教えて
 いただけると助かります。
 |  | 
	
		| トップに戻る |  | 
	
		|  | 
	
		| coil 未登録ユーザー
 
 
 
 
 
 
 | 
			
				|  日時: 2009/01/08 (Thu) 19:51     記事の件名: すみません・・ |   |  
				| 
 |  
				| 返信してたつもりが・・ 申し訳ないです。
 
 
  	  | Shinra wrote: |  	  | 提示していただいた記述で3とおりのブラウザを区別してスタイルを指定可能となる原理を簡単に教えていただけると助かります。 | 
 
 上書きを利用して区別します。
 
 ■IE以外の部分
 CSSを有効にしている全てのブラウザで指定されます。
 
 ■IE4〜6の部分
 「* html」と記述するとIE4〜6で指定されます。つまりIE以外の部分で指定したhtmlに対するスタイルが上書き変更されます。
 「font-size: 1em」なのでIEで標準とされるフォントサイズで表示するということです。
 IEの標準サイズは16pxなので上書きする必要ないように思えますが、IEに限りピクセルで指定してしまうとブラウザで拡大・縮小が出来なくなりますのでその対策です。
 em指定は親に対するサイズ指定で、html中では各段落などはこれをもとにサイズが決定されます。
 一番の親であるhtmlにかけておけばIEでの表示はこのようなCSSカスタマイズを施す前と同じになる。という理屈です。
 
 ■IE7の部分
 「*:first-child+」はIE7で指定されます。
 IE4〜6の部分と理屈は同じです。
 
 
 「pre」を決定する2つ目のコードは等幅の指定です。
 font-family: osaka-mono,monospace;
 「monospace」だけで良いのですが、mac+Safari or Firefoxなどでは効かないみたいなので・・
 「osaka-mono」があればこれを優先させ指定させる記述です。
 |  | 
	
		| トップに戻る |  | 
	
		|  | 
	
		|  |