CSSのショートハンドの記述ルールについて

質問

ショートハンドの記述方法について疑問が出たので質問します。

XHTMLのTransitionalで宣言しているファイルでの話です。
ex1 {
border: #000000 1px;
border-style: solid none;
}
ex2 {
border-style: solid none;
border: #000000 1px;
}

これをそれぞれ適当なボックスに指定すると、ex1は上下に線が、ex2はIE7で確認したところex1と同じ挙動でしたが、FirefoxやOperaでは全く線が表示されませんでした。
恐らくデフォルトのnoneがex2の場合は上書きされるのだろうということでこれは解決したのですが、ショートハンドの記述ルールに対して不安が出てきました。
どこか明確に記述してあるサイトはないかと探してみたのですが、どうにも自力では見つけることが出来ず、自分の記述に自信がもてずにいます。

・ex1と同じ見た目のものを作成したい時、自分（回答者様）ならどう記述するか
・そう記述する根拠

を教えて頂ければと思います。
また、ショートハンドのルールについて詳しく解説しているサイトをもしご存知でしたら、教えて頂ければ幸いです。
よろしくお願いします。

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

W3C定義のCSSルールでは、
http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties
> Omitted values are set to their initial values.
省略した場合はブラウザデフォルトが適用されることになっています。

IEは、
http://msdn2.microsoft.com/en-us/library/ms530744(VS.85).aspx
> So, not only does the property set width to
> thin
> , it also clears any style or color values previously set.
と書かれていますので、
以前セットした値をクリアする＝デフォルト値を適用すると解釈すると、
デフォルト値にならないバグと思います。

> ・ex1と同じ見た目のものを作成したい時、自分（回答者様）ならどう記述するか
全体をまとめて書いてから、部分的に違わせたいところは、その違う部分だけを改めて指定をします。
> ・そう記述する根拠
カスケードや継承のメリットを生かすため。

div{
border: 0 none;
}
.ex1 {
border-top: solid 1px #000000;
border-bottom: solid 1px #000000;
}
または
div{
border: 0 none;
}
.ex1 {
border-color: #000000;
border-width: 1px;
border-style: solid none;
}

ex2のような書き方をしないので、IEの問題は初めて知りました。

> ショートハンドのルールについて詳しく解説しているサイトをもしご存知でしたら、
W3C
http://www.w3.org/TR/CSS21/ （英語）
MSDN
http://msdn2.microsoft.com/en-us/library/aa155110.aspx （英語）
ここからCSSのページへたどって下さい。

W3Cの公式邦訳サイトはないみたいですが、
http://www.w3.org/2005/11/Translations/Lists/ListLang-ja.html
「CSS 翻訳」などのキーワードで検索すると見つかるかもです。

ご参考まで。

お礼

IEの挙動がやはりおかしいのですね。
1行でなんとか記述出来ないものかと色々試していた結果、このような記述に至っていました。
talooさんの具体的な記述を見て、面倒臭がらずにしっかり記述することが大切だなと痛感しました。

恥ずかしながら、翻訳サイトを併用しても文章の意味を汲み切れないレベルの英語力なので、W3Cは目を通そうとしては諦めるということを繰り返しておりまして…。
「翻訳」で検索ということに目から鱗が落ちました。

今までHTMLに関してもCSSに関しても、W3C等でチェックしてエラーがなければOKというスタンスだったので、もう少し詰めて勉強していきたいと思います。
細やかなご回答ありがとうございました。