コミュニティ

学ぶ

ツールライブラリ

AIツール

レジャー

日本語

ホームページ > ウェブフロントエンド > CSSチュートリアル > モバイルブラウザの `` と `` で `overflow-x: hidden` が動作しないのはなぜですか?

モバイルブラウザの `` と `` で `overflow-x: hidden` が動作しないのはなぜですか?

Linda Hamilton

リリース： 2024-12-10 11:45:14

オリジナル

657 人が閲覧しました

Why Doesn't `overflow-x: hidden` Work on `` and `` in Mobile Browsers?

「overflow-x:hidden」にもかかわらず、モバイルブラウザでオーバーフローするコンテンツを解決する

ユーザーが「overflow-x:hidden」を適用する際に不可解な問題に遭遇しました。「body」要素と「html」要素に「x:hidden」を追加しても、表示可能な領域を超えてコンテンツがオーバーフローするのを防ぐことができません

調べてみると、モバイルブラウザはトップレベルのタグに適用されたオーバーフロー属性を無視し、「meta name="viewport" content=」で定義されたビューポート設定を無視しているようです。 ."' タグ。

解決策は、「body」内に包含要素を確立することにあります。

<body>
  <div>

ログイン後にコピー

'overflow-x:hidden' スタイルを 'body' や 'html' ではなく 'wrapper' div に設定すると、オーバーフローはラッパー内に制限され、ビューポートを超えて拡張されるのを防ぎます。

「ラッパー」 div には追加の CSS プロパティが必要な場合があることに注意することが重要です:

#wrapper {
  position: relative;
}

ログイン後にコピー

この追加のスタイルにより、適切なスタイルが保証されます。ラッパー内のコンテンツの位置。これらの変更を実装すると、コンテンツが目的のビューポート内に適切に含まれ、モバイルブラウザーの不要な空白が排除されます。

以上がモバイルブラウザの `` と `` で `overflow-x: hidden` が動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：画像や余分なタグのない HTML リストの箇条書きの色を変更する方法次の記事：CSS を使用して無効なボタンを効果的にスタイル設定するにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2628

Google Chromeのモバイル版を表示する方法こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

2752

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

2334

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

2196

CSS マインドマッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

2304

関連トピック

詳細>

人気のおすすめ

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート