質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

windows safariのCSS崩れについて

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 4,789

score 79

windows safariによるCSSの崩れについて質問です。

windowsのsafariをお持ちの方がいましたら、
実際の崩れたページを見て頂きたいです。
是非、ご助言頂きたいです。

chromeなど他のブラウザ、またmac自身のsafariは正常に見ることが出来るのですが、
windowsのsafariはぐっちゃぐちゃになってしまいました。

ググってみると
html* #id {
xxx:xxxx;
}
/*結局効きませんでした*/
このような感じで指定すると、safariに対応出来ると書いていたのですが、
実際当ててみると本来の原型も留めなくなってしまいました。
.xoxo {
 -webkit-background:url(../xoxox/xoxo.jpg) no-repeat fixed;
}
/*これもダメでした*/
一応上記の方法も書いてみたのですが、いまいち変わりがありませんでした。汗

回避方法、
対処方法などございましたら、是非ご助言頂きたいです。
宜しくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

Windows7,Safari5.1.7(7534.57.2)の WebInspectorで確認しましたところ、
section2-5までheghtが0となっています。
section1と同様heightを指定すると他のブラウザと同様になるかと思います。

追記です
Chromeで確認したところsection1はheight: 268px;となっていました。
Safariはheight: 719px; でした。
$(document).ready(function () {
$('html,body').fadeIn(1000);
//    alert($(document).width());
var isTD = (document.ontouchstart !== undefined)? true : false;
var hsize = $(window).height();
if (!isTD) {
    $(".section1").css("height", hsize + "px");
} else {
    $(".section1").css("height", "100%");
}
});
$(window).resize(function () {
hsize = $(window).height();
$(".section1").css("height", hsize + "px");
});
このあたりが問題のようです。

再度追記いたします。
cssに height: 100vh;という記述があります。これがSafariが対応していないため
100%と解釈されているようです。
少々乱暴ではありますが、Safariの場合のみ
$(".section1").css("height", hsize + "px");
を(resizeのところも)
$(".cover").css("height", hsize + "px");
とすればとりあえずの表示はされそうです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/30 22:27

    ご回答ありがとうございました!
    す、すごい!
    魔法をかけてもらったような気分です!
    丁寧な解説までしてくださり感謝いたします!

    キャンセル

0

関係があるかもしれないので気になった所を挙げます。
  • <!DOCTYPE html>の直前と</html>の直後にある改行
  • style.css内のマルチバイト文字の文字化け(Operaで確認。@charsetの指定とファイルの文字エンコード一致していないかもしれません)
  • 異なる文字コードの指定
<!-- UTF-8 -->
<meta charset="UTF-8">

<!-- Shift_JIS -->
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis" />

<!-- HTML5では特に理由が無い限り後者の指定は無くても大丈夫です -->
関係は無いかもしれませんが、念の為にこのあたりを確認してみると良いかもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/30 22:24

    回答して気付きましたがもう解決されてたんですね。
    失礼しました。

    キャンセル

  • 2015/06/30 22:33

    ご回答くださりありがとうございます!
    文字化けを教えてくださって感謝です。
    修正します!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る