safari,chromeでのwhite-space:nowrapのバグ?

この方とおなじことが起きました。

-----
あいうえおかきくけこさしすせそ
-----
を

-----
あいうえおかきくけこ
さしすせそ
-----
としたいのに

-----
あいうえおかきくけ
こさしすせそ
-----
と1文字付いてきてしまいます。Webkitの問題？

script.aculo.us の effects.js が position:relativeに効かない

題名の通りで、Effect.Opacityを使ってふわっと出現させるエフェクトをつけようとしたら、relativeの要素には効かなかった。微妙な下揃えが必要なのでしかたなくtableを使うことに。解決策はあるんでしょうか。

ie6 min-height

.hoge {
min-height: 300px;
height: auto !important;
height: 300px;
}

border:doubleは3の倍数にしてもIEで背景が白くなる

border:doubleで二重線を引くことができる。
でも...

■3の倍数にする
おそらく[線:空間:線]となる関係で、3の倍数じゃないと表示が怪しい。

■結局IEで駄目
[線:空間:線]の空間のところは要素の背景色が反映されてほしいけど、IEでは真っ白になる。
なので、背景白の場合以外は使えない。
tdの背景に線入り画像敷くとかでなんとかするしかない。

border-collapseのつける位置

table td{border:1px solid;}
とかして隣り合うセルのボーダーを重ねたいときの
border-collapse:collapse;
は、table自体につける。
tdやthにつけても駄目。

スクリーンリーダー(NDVA)でアンカーリンク(ページ内リンク)がおかしい時

■問題
音声ブラウザ用にメニュー読み飛ばしのページ内リンクを設定して、NVDA(フリーのスクリーンリーダー)で試したところ上手く機能しない。ページ内の指定の場所に飛ぶはずが、何故かデスクトップにいってしまう(なんでまたデスクトップに)。


■解決
<li>に"display:block;"を追加したら上手くいった。


■補足
・何故<li>かというとこうする↓ことが多いから。
<ul>
　<li>メニュー1</li>
　<li>メニュー2</li>
　<li>メニュー3</li>
</ul>

・<p>は何もしなくても大丈夫だった。
<p>○○へ</p>


ということは、block要素にすればokなのかも。
他のソフトでも試してみたかったけれど、有名どころの体験版がことごとく無くなっていて残念。

safariでcssが効かないとき

safariだけどうもcssが効かない。
何かと思ったら[@charset "Shift_JIS";]を1行目に書いてなかったから。

------------------------
/* コメントコメント */
@charset "Shift_JIS";
------------------------
は駄目。

------------------------
(空白)
@charset "Shift_JIS";
------------------------
も駄目。

------------------------
@charset "Shift_JIS";
(空白)
------------------------
で解決。

・ありがたい参考サイト
http://www.ichiro.to/item/673

positionの記述途中にコメントを入れては駄目？

position:absolute;
top:0;
z-index:10;

と書くとき、


position:absolute; /* コメント */
top:0; /* コメント */
z-index:10; /* コメント */

というように途中にコメント挟むとz-indexが反映されなかった(IE6)。


position:absolute; /* コメント */
top:0;
z-index:10;

これは大丈夫だった。



【追記】

position:absolute; /* alphabet */
top:0; /* alphabet */
z-index:10; /* alphabet */

コメントが英数のみだと問題なく動いた。


position:absolute; /* 日本語 */
top:0; /* 日本語 */
z-index:10; /* 日本語 */

日本語が入ると駄目だった。

list-style-positionの挙動

IEとそれ以外だと違う。

・全体　li {list-style-position:inside;}
・その中の特定のulにclassつけてそれに対して{list-style-type:none;}

このときFFとかだと左詰まるけど、
IEはリストマークの無い左に空白できて詰まらない。

ので、classつけたulのliに対して{list-style-position:outside;}