jquery.customSelect.jsを使ったセレクトボックスを、text-align:center;で中央寄せすると、IE11環境のみでクリック選択できなくなります。
画面左端の空間をクリックするとなぜか選択できます。
解決方法は、text-align:center;を使うのを止めることです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> </head> <body> <style type="text/css"> .customSelect { border:solid 1px #333; padding:10px; } div { text-align:center; } </style> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.customSelect.js"></script> <script> $(function(){ $(".customSelect").customSelect(); }); </script> <div> <form> <select class="customSelect"> <option value="">customSelectのセレクトボックス</option> <option value=""></option> <option value=""></option> </select> </form> </div> <div> <form> <select class=""> <option value="">標準のセレクトボックス</option> <option value=""></option> <option value=""></option> </select> </form> </div> </body> </html> |
追記
上記コードで再現しないことがあります
原因が特定できていません
[確認環境]
Windows 7 SP1 64bit
IE 11.0.9600.17843
jquery-1.11.1.min.js
http://jquery.com/download/
jquery.customSelect() – v0.5.1（2014-03-19版、2015年7月30日現在の最新バージョン）
http://adam.co/lab/jquery/customselect/
→エクスプローラでコーディング中のフォルダの名前を変える（または他の場所に退避する）
→Dreamweaverを起動する
→Dreamweaverが起動し、サイト管理よりサイト定義を求められる
→Dreamweaverを一旦終了する
→Dreamweaverが落ちる直前に編集していたファイル（特にCSS）をテキストエディタで開く
→落ちる直前に書いたコード（特にCSS）を削除する
→エクスプローラーでフォルダの名前を元に戻す
→Dreamweaverを起動する
→無事に起動する
以上で完了です。
[確認環境]
Windows 7 SP1 64bit
Dreamweaver CS3 9.0
親要素の直下にある要素にmargin-topをつけても期待通りには動かない。
マージンの色が親要素のさらに親要素の背景色になってしまう問題がある。
[解決方法]
・スペースを取りたいときにはpaddingを使う（marginは使わない）
・何か（a など）を挟み込んで配置を変えてやる（親要素直下でなければ期待通りに動く）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<body> <div class="sampleDiv"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="sampleTable"> <tr> <th scope="row">サンプルサンプルサンプルサンプル</th> <td>サンプルサンプルサンプルサンプル</td> </tr> </table> </div> </body> body { background:#FFF; } .sampleDiv { background:#000; } .sampleTable{ margin-top:100px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<body> <div class="sampleDiv"> a <table width="100%" border="0" cellspacing="0" cellpadding="0" class="sampleTable"> <tr> <th scope="row">サンプルサンプルサンプルサンプル</th> <td>サンプルサンプルサンプルサンプル</td> </tr> </table> </div> </body> body { background:#FFF; } .sampleDiv { background:#000; } .sampleTable{ margin-top:100px; } |
ブラウザ高さに対して、コンテンツ高さが足りない時、フッターの下にbodyの背景色が出てきてしまう問題がある
例）メインコンテンツの背景が白、フッターが黒のWebサイトの場合、
条件を満たすと、黒フッターのさらに下に白背景が表示されてしまう
{解決方法}
→フッターの背景色と同色を、bodyの背景色にも指定する
原因
誤った記述「width=”100 %”」が表題のトラブルを起こしていた
正しい記述「width=”100%”」へ修正して解決した
誤った記述「width=”100 %”」の表示状況は以下のようになっていた
・IE 11 ：テーブルが正しく表示される
・Firefox 30 ：テーブルが正しく表示される
・Google Chrome 36：テーブルが萎んでしまう
[操作手順]
→公式サイトよりjQueryのファイルをDLする
http://jquery.com/download/
以下、どちらかひとつでOKです。
※今回はjQuery 1.x 系で話を進めます
※バージョンが異なる際は、適宜読み替えてDLする
jQuery 1.x 系（互換性を優先。オールドブラウザを幅広くサポート。）
Download the compressed, production jQuery 1.11.3
jQuery 2.x 系（ファイルサイズ、パフォーマンスを優先。モダンブラウザに最適化。）
Download the compressed, production jQuery 2.1.4
→以下のディレクトリ構成でjQueryのファイル（jsファイル）を設置する
\HTML\index.html
\HTML\js
\HTML\js\jquery-1.11.3.min.js
\HTML\css
\HTML\css\common.css
→index.htmlでjQueryのファイル（jsファイル）を読み込む為の設定を書く
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <link type="text/css" rel="stylesheet" href="css/common.css" /> </head> <body> </body> </html> |
→以上でjQueryの使用環境が整いました
別途、任意のjQueryプラグインを同様の手順で組み込んで使用します
|
|
メールアドレス<input type="text" value="" name="" id="" istyle="3" format="*x" mode="alphabet" /> |
以下の機能を満たしています。
・フォームテキストボックスのフォントサイズ＝small、カラー＝#333333（黒）
・半角英字モード（auのみ小文字半角英数字）
・3携帯キャリア対応（i-mode docomo端末、EZweb au端末、Yahoo!ケータイ softbank端末）
※EZweb au端末について
・頭の*（アスタリスク）、または数字で文字数・桁数を指定できる。
・頭の*（アスタリスク）で文字数制限無しになる。（例：「*A」「*a」「*N」など）
・頭の数字で文字数・桁数を指定する。（4桁指定の例：「4A」「4a」「4N」など）
・指定桁数以外は受け付けないので注意する。（例えば、4桁指定の際は4桁以外の入力を受け付けない。）
・桁数に幅を持たせる時は、maxlengthで最大桁数を指定する。（ただし、i-mode docomo端末のみバイト数指定となることに注意）
|
|
<span style="font-size:small; color:#333333;">TEL<input type="text" value="" name="" id="" size="5" istyle="4" format="*N" mode="numeric" maxlength="4" />-<input type="text" value="" name="" id="" size="5" istyle="4" format="*N" mode="numeric" maxlength="4" />-<input type="text" value="" name="" id="" size="5" istyle="4" format="*N" mode="numeric" maxlength="4" /></span><br /> |
以下の機能を満たしています。
・フォームテキストボックスのフォントサイズ＝small、カラー＝#333333（黒）
・半角数字モード
・入力桁数制限（TEL[最大4桁]-[最大4桁]-[最大4桁]）
・3携帯キャリア対応（i-mode docomo端末、EZweb au端末、Yahoo!ケータイ softbank端末）
※EZweb au端末について
・頭の*（アスタリスク）、または数字で文字数・桁数を指定できる。
・頭の*（アスタリスク）で文字数制限無しになる。（例：「*A」「*a」「*N」など）
・頭の数字で文字数・桁数を指定する。（4桁指定の例：「4A」「4a」「4N」など）
・指定桁数以外は受け付けないので注意する。（例えば、4桁指定の際は4桁以外の入力を受け付けない。）
・桁数に幅を持たせる時は、maxlengthで最大桁数を指定する。（ただし、i-mode docomo端末のみバイト数指定となることに注意）
|
|
<span style="font-size:small; color:#333333;">〒<input type="text" value="" name="" id="" size="6" istyle="4" format="3N" mode="numeric" maxlength="3" />-<input type="text" value="" name="" id="" size="7" istyle="4" format="4N" mode="numeric" maxlength="4" /></span><br /> |
以下の機能を満たしています。
・フォームテキストボックスのフォントサイズ＝small、カラー＝#333333（黒）
・半角数字モード
・入力桁数制限（〒[3桁]-[4桁]） ※EZweb au端末のみ固定桁数、それ以外の端末は最大桁数となる。
・3携帯キャリア対応（i-mode docomo端末、EZweb au端末、Yahoo!ケータイ softbank端末）
※EZweb au端末について
・頭の*（アスタリスク）、または数字で文字数・桁数を指定できる。
・頭の*（アスタリスク）で文字数制限無しになる。（例：「*A」「*a」「*N」など）
・頭の数字で文字数・桁数を指定する。（4桁指定の例：「4A」「4a」「4N」など）
・指定桁数以外は受け付けないので注意する。（例えば、4桁指定の際は4桁以外の入力を受け付けない。）
・桁数に幅を持たせる時は、maxlengthで最大桁数を指定する。（ただし、i-mode docomo端末のみバイト数指定となることに注意）
Practice is better than precept.