問題タブ [css-hack]

@media query を使用してレスポンシブ ページを開発しました。今、iPhone 6+ で自分のページをチェックすると、不要な余白が表示されます。

ただし、ページは chorme 、firefox ブラウザー (開発者モードも) で正常に動作しています。

ページから不要な空白のマージンを削除できるように、サファリ用の CSS ハックはありますか。

私はレスポンシブCSSで以下のコードを使用しました

以下のコードを試しましたが、Safari と Chrome の両方で動作しています。

ChromeではなくSafariのみのハックを教えてください

どちらも Chrome と Safari で動作していますが、私は Safari でのみ使用したいと考えています。

css を使用してフリップ カードを作成しています。ユーザーがカードをホバー/クリックすると、フリップして裏面の内容が表示されます。これは、IE9 を除くすべてのブラウザーで機能します。

css ハックを使用しようとしていますが、ユーザーが前面の div にカーソルを合わせるまで、背面を非表示にすることはできません。

IE9 は css の 3D パースペクティブ機能をサポートしていないと思います。そのため、カードをホバーすると、カードの裏側を表示/非表示にすることができる可能性が高くなります。

JSFIDDLE: https://jsfiddle.net/uetno72t/4/

Safari 6-9 バージョンを対象とし、これには特定の css が必要です。

Safari 7 および 8 の CSS を以下で試しましたが、Safari 9 にも適用されています。

Safari 9 の 2 つのハックに従ってみましたが、上記のハックは 9 で以下を上書きします

サファリで次のことも試しましたが、6と7では機能し、8では機能しません

どんな助けもかなりのものです。

私はこれで問題に立ち往生しました

皆さんは、このような問題をどのように解決しますか?

私はそれをjavscriptで解決しようとしましたが、私の解決策は間違っているようです.

setInterval を使用して、ネストされた子のいずれかが高さを変更したかどうかを確認し、親ボックスの高さを再計算します。実際、パフォーマンスとコードの美しさのために、より良い解決策を見つける必要があります。

スニペットは、実際の再計算に比べて非常に単純化されています。

フレックスボックスまたはこれを解決できるツールを自由に使用できます

この「ハック」をブートストラップ対応ページ ( https://gist.github.com/Jakobud/c057577daddbde4dd709 )に追加したいのですが、ブートストラップはまったく初めてで、どこにコードを追加すればよいかわかりません。 . css フォルダーに bootstrap.min.css と bootstrap.css があることは知っていますが、上記のリンクをクリックすると、「SASS」と表示され、15 行目に次のように表示されます。 bootstrap.scss の終わり。

私は標準の Bootstrap を使用しているだけなので、どこにコードを配置すればよいかわかりません!

ありがとう！

スライド/プッシュアウト メニューを作成中で、別の質問があります (前回のヘルプに感謝します)。

メニューをスライドさせて Web ページを圧縮していますが、サーバー上の Web ページが少し遅く (複雑なページや Python 文字列の呼び出しなど)、ページ コンテンツが読み込まれる前に下のメニューが一瞬表示されます。そのため、おそらくトリガー アイコンをクリックするまで、ページの読み込み時にメニューを非表示にしたいと思います。私はたくさんのことを試しましたが、それを行う方法がわかりません。私はそれが単純だと確信しており、「チェックボックスハック」を完全には理解していません. 他の提案は大歓迎です！javascript は使えず、css しかありません。

余分ですが、役に立ちます:ホームアイコンの代わりにそのアニメーションアイコン(ホームアイコンの下)を実装するのを手伝ってくれる人がいれば、それは非常に役に立ちます. 私はそれを理解できないようです。

transition: all 0.4s ease 0s;編集：フラッシュの原因がon であることに気付きました.site-wrap。私のサーバーでは遅いため、遷移が遅くなり、ページ全体が遷移するときに下のメニューが表示されます。leftではなく、rightトランジションと組み合わせて行う方法があるかどうかはわかりませんall。

編集:コンテンツ内でpython文字列が呼び出されたときに、サーバー上でのみ、jsfiddleでこの問題を再現できません。

これがすべて理にかなっていることを願っています！

参照用の私のjsfiddleは次のとおりです: https://jsfiddle.net/2u64k0xq/6/