2012年9月16日日曜日

safariでセレクトボックスのレイアウトが微妙にずれる

最近はCSSをいじって、サイトのレイアウトを整えることも行っているのですが
IE,FireFoxでは全ての部品が画面の左部分に寄って表示されるところが
safariだとセレクトボックスだけが微妙に左揃えにならない。。。

セレクトボックスだけが数ピクセルほど右側になっているので
画面上の部品が左揃えではなく、インデントがガタガタになって表示されるので
かなり気になる。

と、Safariを開発モードにして調べてみると
どうやら、Safariで表示されるセレクトボックスではデフォルトでmargin:2pxに
なっており、ここが原因っぽい。

Selectタグにmargin-left:0px; を自前で設定すると、事象が解決しました。

今までサイトのレイアウト調整をしたことがなかったので
ブラウザで独自にCSSが当てられるとは知らなかった。。
いい勉強になりました♪


2012年9月13日木曜日

safariでpdfをダウンロードした場合に、拡張しが.htmlになる件

開発中のAPでIEとFireFoxなら、ダウンロードボタンを押した後に
PDFファイルがダウンロードできるのに、
Safariだと、ダウンロードしたファイルに.html拡張子がつく。。。
何故に???

少々調べてみるとこのページを発見
HTTP :: Content-Disposition: inline / attachment

jpagのダウンロード方法のソースが載っています。
今回はPDFのダウンロードなので、あまり参考にならないかなぁ・・・
と思いながらながめていると、ソースの最後に
"exit;"
という文字が・・・。

なんとなくピーン!と来たので、"exit;"をソースに追加し
Safariからダウンロードすると、無事にPDFファイルとして
ダウンロードできました。

ただ、処理の最後に"exit;"をつけると何故、.htmlが拡張子に
追加されなくなったのかは謎。

推測の域はでませんが、phpでファイルを読み込み、出力後に
exitをしているので、htmlにレンラリング?されないためでしょうか。。。
と、まだまだ勉強不足ですが、とりあえずこんな感じでした。


2012年9月11日火曜日

safariとfirefoxでのtextareaの違い

firefoxでheightとwidthを指定して表示していたtext areaが
なぜか、safariでは4pxほど幅が大きくなって表示される??

ちょいと調べてみると、どうやらsafariのtextareaはデフォルトで
padding:2px となっているので、幅がfirefoxで表示するよりも4px長く
なっていたのが原因。

ただ、safariでpadding:0 で表示するとtextareaの枠線と、textarea内に表示している
文字が近く少々見づらいため
safari側にあわせて、textareaのスタイルをpadding:2px 、widthを元々の値から-4pxして
対応しました。

これにて一件落着です!