MacのSafari(Chrome)でボタンの縦幅を指定できない

MacのSafariとChromeで、input type=buttonの高さ(height)指定が無視されます。
WindowsのSafariやChromeでは大丈夫だし、iOSのMobileSafariでも問題ありません。

また、SafariとChrome以外のブラウザでも問題ありません。
原因はいまいちわかりませんが、MacOS向けのWebkitに不具合がありそうです。



を表示すると、MacOSXのSafariとChromeだけ、高さ指定が無視されます。
以下のように背景色を指定すると高さ指定が有効になるようです。

ブロックレベルでセンタリング

 

  ブロックレベル要素
 

リンク指マーク

cursor: pointer;

各ブラウザで折返しさせる

pre {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}

a要素の下線を消す

a {
text-decoration: none;
}
文字の装飾（下線、上線、取り消し線、点滅）を指定するプロパティです。

a要素に対してこのプロパティ（値 none）を設定すると、リンクテキストの下線を消すことができます。


＊＊参考＊＊
http://www.tagindex.com/stylesheet/link/text_decoration.html

CSSだけで幅を超えた文字列を...で省略する

ある幅に合わせて文字列を省略したいときがありますが、
レンダリングされる文字によって幅が違うので、文字数で制御するのは割と面倒ですね。

ですが以下のようにcssを書いておけばきっちり決めた幅であふれた部分を「...」で省略してくれます。

CSS
p{
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; /* Opera9,10対応 */
}
HTML

もじもじもじもじもじもじもじもじもじもじもじ

面白いのは、省略されて後ろについた「...」までを選択してコピペすると省略されて隠れている部分までちゃんとコピペできます。