フロート解除と上マージンは一緒に指定しない!
フロート解除を指定した要素に、上マージンを指定しても、
上マージンが利かない(;´Д`)ノ。
----------------------------------
p {
clear: both;
margin-top: 10px;
}
----------------------------------
↑この様な指定
フロート解除と上マージンは一緒に指定しちゃだめ!
って事を覚えておこう。
clearは「floatの解除」です
ってのは、ほとんどの場合は正しいらしいが、
正確には、
clearは「上マージンの自動調節」。
(css2.1では、上マージンが不足する場合に不足分を埋める「クリアランス」を設ける)
◎clearは、上マージンを増加させるプロパティで、上マージンの指定を上書きしちゃいます。
※てんぽさんの「clearは「floatの解除」ではない 」 を参考にさせてもらいました。
詳しく書いてあります。ありがとうございます。
半角英数字を改行する
今更ですが、時間があいたのでメモ。
「URLなど半角英数文字を流したときに
自動改行せず、レイアウトからはみ出してしまう。」
CSSで回避
---------------------------------------
word-break: break-all;/* 半角英数改行IE対応 */
---------------------------------------
※IE、safari、Google Chrome~word-breakプロパティ実装
※Firefox、Opera~word-breakプロパティ未実装→使えません。
※「W3C CSS検証サービス」でエラー
L エラー内容/CSS2.1は非対応です。(3より対応)
【参考になるブログ】
■「to-R」さんのブログで
FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリが紹介されています。
http://blog.webcreativepark.net/2008/09/14-211341.html
※table要素に対応してるようです。
■Webtech Walkerさん
→ word-break:break-allをFirefox等でも実現するjavascript(jQuery)
>http://webtech-walker.com/archive/2008/11/02151611.html
■MEMO 4 MEさん
→ 半角英数による横幅崩れ
>http://memo4me.seesaa.net/article/120355012.html
いろいろ参考になる記事があるので、
その時々で、使ってみようと思います。
やはり
word-break: break-all
の対応だけでは無理っすかね……精進。