100% に設定されたテキストボックスと 100% に設定された div の幅が異なるのはなぜですか_html/css

ディスカッションへの返信（解決策）

ホームページ

ウェブフロントエンド

htmlチュートリアル

100% に設定されたテキストボックスと 100% に設定された div の幅が異なるのはなぜですか_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:17 PM

<table style="width:200px">        <tr>            <td style="padding-right:4px">                <input id="Text1" type="text" style="width:100%;height:16px;border:1px solid #b7d1eb" />            </td>        </tr>        <tr>            <td style="padding-right:4px">                <div style="width:100%;height:16px;border:1px solid #b7d1eb">                </div>            </td>        </tr>    </table>

ログイン後にコピー

2 つの配置効果が必要です。つまり、テキストボックスと div が 100% の幅に設定されている場合、それらは視覚的に同じ幅になるため、配置する必要があります。 CSSスタイルの書き方。

ディスカッションへの返信（解決策）

試してみたところ、2つの要素が100%に設定されていて矛盾しているように感じましたが、divの幅を99%に設定できます。長さが 300 を超えなければ、見た目は良くなります

これはブラウザの問題であると断言できます。 IE9 では調整されず、Firefox では調整され、Apple では調整されます。ですので現時点では複数のブラウザに対応した書き方を推奨しており、テーブル内にdivを記述することは推奨しておりません

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7333

Java チュートリアル

1627

CakePHP チュートリアル

1351

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、