Page: 2/2  << 
Mac IEだけ無効にするスタイルシートのハック
Mac IEだけでどうしてもうまくいかない時に使うハック
.sample {
line-height:110%; //Mac IEではこれが解釈される
/* MacIE begin ¥*/
line-height:120%; //Mac IE以外ではこれが解釈される
/* MacIE end */
}

よく使われる有名なものなので覚えておくとかなり便利です。
14:33 | comments(0) | trackbacks(0) | - | -
Mac IE <div>の中に入れた<p>のmargin-bottomが<div>に反映されてしまうバグ
タイトル長いですが…
<div>の中に<p>を入れ子にして、<p>にmargin-bottomを指定すると、なぜか<div>のほうにもmargin-bottomの値が反映されてしまう、というバグです。

見かけ上は、へんなすきまが空いてしまうので、前後のBOXの設定を見比べたり、HTMLのほうで改行が入っていないかなどをチェックしてしまったのですが、原因がBOXの入れ子にした要素にあったとは…

このバグを検索するのに時間がかかってしまいましたが、
「margin-bottom の逆継承」というらしいです。
↑このサイトのページの下のほうに詳しく出ています。

解決方法は、
<div>の中に<p>を入れ子にした時は、Pのmargin-bottomは0にする。
どうしてもmargin-bottomをとる必要があったら、<p>はあきらめて、<div>の中に<div>で入れ子にする…・・って感じでしょうか。
10:41 | comments(0) | trackbacks(0) | - | -
Win IEだけにスタイルシートの宣言を有効にするハック
WindowsIEにだけ、スタイルシートの宣言を有効にできるハックです。

【HTML】
<p>フォントサイズテスト</p>

【CSSの記述】
p {
font-size:14px; //全体に有効
_font-size:10px; //Win IEだけに有効
}

※「_」アンダーバーをプロパティの前につけることがポイント。


とすると、WinIEではフォントが10pxそれ以外のブラウザでは14pxの表示になります。

この二つを、上下逆に記述してしまうと、このハックは使えません。後に書いたほうの宣言のほうが有効になってしまうので。
10:18 | comments(0) | trackbacks(0) | - | -
Netscapeの背景画像がずれるバグ
Netscape4.Xで、このバグは有名(というかよく見かける)ですが、今回7でもこのバグが出たので、解決方法についてのメモ。

<div class="back">
<p>テキスト</p>
</div>

.back{
background-image:url(****)">//背景画像を指定
width:650px;
margin:0px;
}

.back p {
margin:20px 0px 0px 80px;
}


上記のように指定したとき、Netscape7にて、背景画像が、テキストが始まる位置からしか表示されませんでした。
pをdivにしてもclass指定にしてもだめでした。

4.7のバグ集には、
pの場合はmarginとborderは必ず指定、とあるのでそれも試しましたがダメでした。
(↑本当ならこれでうまくいくのかな?と思いました。)

結局、marginでのテキストの位置指定はあきらめて、
.back p {
position:relative;top:20px ;left:80px;
}


という書き方に変えてうまくいきました。
・・ほかに良い方法があればコメントください。
14:36 | comments(3) | trackbacks(0) | - | -
CSSの構造を把握する(ボーダーを一気に表示する)
大きいページになればなるほど、スタイルシートでのコーディングが、わけがわからなくなってしまいます。

そういう時、いままでは、いちいち
border:1px solid;
を挿入しては、構造を確認する…というめんどうくさい作業をしていたのですが、いいものを見つけたのでご紹介。

CSSレイアウトの構造を確認するコツです。

以下、引用させていただきます。
<head></head>の中に書くのがポイントです。
<style type="text/css">
<!--
* {
border: 1px solid #CC3333 !important;
margin: 2px;
}
p { background: #F7F49B!important; }
-->
</style>

これで全体の構造が一気に分かりますし、削除するのも簡単です。
13:50 | comments(0) | trackbacks(0) | - | -
テキスト(項目)部分をクリックしてもチェックされる、チェックボックスやラジオボタンを作るCSS
ラジオボタンやチェックボックスは小さいため、そのままだと使いにくいです。

そこで項目の部分をクリックしてもラジオボタンやチェックボックスにチェックが入るCSSです。

CSSファイル
//分かりやすいように、カーソルが乗ったとき「手」にします。
//分かりやすいように、アンダーラインも出しています。

.labelsel {
cursor: hand;
border-bottom: 1px dotted #FF0000;
}

HTMLファイル
<form>
<input name="choice" type="radio" value="1" id="choice1">
<label for="choice1" class="labelsel">選択肢1</label>
<input name="choice" type="radio" value="2" id="choice2">
<label for="choice2" class="labelsel">選択肢2</label>
</form>
10:33 | comments(0) | trackbacks(0) | - | -
Mac IE テキストが横にはみ出すバグ
テーブルの幅も、divの幅も指定しているのに、なぜかテキストが横にはみ出す…

という現象が、Mac IEでのみ起こりました。

調べたところ、
「letter-spacing」を指定していると、Mac IEが対応していないため、そうなるようです。「letter-spacing」の指定をはずしたところ、うまくいきました。

参考サイト:http://cssbug.at.infoseek.co.jp/detail/macie/b014.html
17:39 | comments(0) | trackbacks(0) | - | -
width padding 同時指定する時の対策
スタイルシートで、width属性、margin属性、padding属性を同時に指定すると、widthで指定した幅が、ブラウザによって解釈が違うので、レイアウトが崩れます。

Win IE …Widthの幅の外側にmargin、内側にpaddingがとられる。
→widthを600pxにしたら実際のハコの幅も600px。
それ以外 …WidthはPaddingを含まない。
→widthを600px、paddingを10pxにしたら実際のハコの幅は620pxに。

説明が適当すぎるかもしれませんが、こんな感じです。

このズレを回避するために、

#middle{
padding: 0px 20px;
width: 780px;  //作りたい囲いの幅
voice-family: "¥"}¥"";
voice-family:inherit;
width:740px;
}
html>body #middle {
width: 740px; //作りたい囲いの幅-左右のpaddingを引いた値
}

(参考元:下記)

これで何とかなりました。(実験済み)

参考サイトは→http://jugem.jp/fun/css_template01.php
このハックの解説もここに書かれています。
11:25 | comments(0) | trackbacks(0) | - | -

Calendar

 123456
78910111213
14151617181920
21222324252627
28293031   
<< January 2018 >>

Recommend

Search

Entry

Comment

  • リンク元のページに戻るボタン(PHP)
    Tadashi (03/13)
  • サイト全体をメンテナンスページに切り替える単純な方法
    yo5kg (06/06)
  • 再配布不可識別子の入れ方
    jumbo (04/25)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    ぐみ (12/11)
  • 再配布不可識別子の入れ方
    eguti (06/04)
  • ナビゲーションをul、liで作成する時
    ビジログ (03/09)
  • 再配布不可識別子の入れ方
    nana (02/02)
  • 再配布不可識別子の入れ方
    TOM (01/22)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    pon (11/09)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    pon (11/09)

Archives

Category

Link

Feed

Others

無料ブログ作成サービス JUGEM

Mobile

qrcode