firefox
-
div {}
opera
-
html:first-child div {}
safari
-
html* div {}
Ie6
-
*html div {}
Ie7
-
*+html div {}
※全部個別に指定してあげないとズレるかもしれない。
Web系エンジニアの適当なブログです。どうでも酔いものばかり作ってます。
firefox
opera
safari
Ie6
Ie7
※全部個別に指定してあげないとズレるかもしれない。
TrackBack URL :
Comments (0)僕が作ってるwordpress用のmixiっぽいテンプレートですが、最後のバグ取り(Safariでカレンダーのボーダーが正しく表示されない)が完了しました。
safariって、Web標準に一番近い挙動で動くブラウザですが、これが結構対応がわかんなかった。
厳格なのか何なのかわかんないんですが、tableのwidthが178pxなのに、captionのwidthが180pxになっていたので、caption分がtableの枠からはみ出して、 右ボーダーを正しく表示できてなかったようです。サイズ揃えたら、いとも簡単に表示されたお(´ω`)
そんな、最新版のmixi風wordpressテンプレートのダウンロードはこちら
TrackBack URL :
Comments (0)ひろぽっぽれすのデザインをちょっちいじりました。ヘッダー部分をもちっといじっていこうと思います。
TrackBack URL :
Comments (0)こんちゃす。海外のCSSデザインを見ていたら、text-indent: -9999px; とは違う画像置換方法を見つけました。(既出かも)
旧式では、CSS側で、text-indent: -9999px; などと指定して、テキストを飛ばして、バックグラウンドに画像を指定する下記のようなテクニックを使います。
text-indent: -9999px を使ったテクニック
しかし、これでは、キーボードでのタブ移動の際に選択がわかりにくくなって、アクセシビリティ的によくないとのことから、display: none; を使った画像置換テクニックもあります。
display: none; を使った画像置換テクニック
TrackBack URL :
Comments (0)* (ユニバーサルセレクタ)ですべてのフォントサイズを100%に
して、そこからタグごとの指定をするのが定石です。
この記述をハックを使用して記述するとこうなります。
でもこのハックはIE7では有効ではなくて、font-size: 12px; で
絶対指定することになってしまいます。
なので、「*(アスタリスク)ハック」を使用します。
ショートハンドのfont プロパティには、font-sizeとfont-familyの値が
必須となります。なので、3行目の技術は不正なプロパティとなり、
仕様に準拠しているブラウザでは無視され、IEだけ読み込んでしまいます(笑)
で、これらの文法違反をクリアしようとするとこうなります。
TrackBack URL :
Comments (0)FirefoxやNetscape 等、Geckoエンジンを用いたブラウザでは、連続した半角文字(長いURLや半角空白のないスクリプト等)を途中で折り返せない
という既知のバグがあります。
【前提:連続する半角英数字が改行されない】
通常、テキストは右端で折り返しされるはずですが、URL (URI) 等の連続する半角文字は一つの単語と扱われ、折り返さない場合が多いです。つまり、
"aaaaaaaaaaaaaaaaaaaaaaaaa"はコンピュータからみれば一つの単語で、途中に改行が入ることが許されません。
ということです。
参考資料:
・半角文字列の折り返し(ブラウザ毎の比較があります)
http://pinotan.blog15.fc2.com/file/word-break.html
【通常の対処方法】
- htmlタグbrで強制改行。
- はみ出し部分をCSS(overflow:hidden)で切り落とす。(IE6は親ボックスの幅が広がるバグがあるので、widthで直接的に幅を指定しないと効かない)
- CSSにword-break:break-allを指定し、IEだけ右端で改行。(ボックス幅の広がりを防げるが、単語区切りにならず英数字が読み辛い)
- CSSにword-break:keep-allを指定し、IEだけ右端で改行。(単語区切りのみで改行。区切りが無いと全角でも改行されない)
- 区切り記号を全角にする。(稀に折り返さないケースもある)
- 半角記号を空白(スペース)で挟む。
- 単語の区切りなどに<wbr>(<wbr />)を入れる。
参考資料:
7以外は以下の引用です
http://pinotan.blog15.fc2.com/blog-entry-106.html
Firefoxの場合、折り返すようにする拡張機能(url_breaker、url_breker_plusもしくはGreaseMonkeyを使う方法)があります
ただ、この場合、ユーザーにインストールしてもらわないといけないので、入れていない人にも効かせて欲しい場合は、これをjs化することで対応できます。
参考資料:
Firefox・Netscapeで連続した半角文字を折り返す
http://www.koikikukan.com/archives/2005/08/04-235647.php
NN7やmozillaでは、なんと全角数字も同じように扱われてしまいます。
しかし記号もそうなのだとは知りませんでした。
参考ページ。
http://www.mozilla.gr.jp/forums/?mode=al2&namber=6847&rev=&&KLOG=47
TrackBack URL :
Comments (0)こんちゃす。ぴです。
自分、funnythingzというWeb屋の集まり集団の代表やってます。
その公式サイトでもあるhttp:/www.funnythingz.com/なんですが、 今日久しぶりにソースレベルでの更新を行いました。どうってことないのですが、Web標準を謳っている割にクロスブラウザにちゃんと対応していなかったので、(X)HTML部分とCSSを改修しました。
これで、IE7,でもIE6以下でもFirefoxでも、Opera9でも、Netscape7.1でも、Safari3でもレイアウト崩れしてないんだぜ!というのを大きくアピールできます。(誰にwwwwwwww)
といっても、中身のないサイトなんであまり意味ないんですけどね。
TrackBack URL :
Comments (0)