- ベストアンサー
chromeでの表示に問題があります。対策方法を教えてください。
- デザイナーに作ってもらったサイトですが、ChromeやFirefoxでは正常に表示されず、申し込み欄が大幅にずれています。
- デザインに使われているbackground-imageがずれる原因となっています。
- 解決方法としては、background-imageのパスを修正することや、widthやheightの値を調整することが挙げられます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
まず、互換モードで作成されているので、標準モードに変更します。 HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML xmlns="http://www.w3.org/1999/xhtml"> この２行を下のように変更 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> 次に CSS ファイルの修正 form.css の一部を下のように修正 .tbl_form { /*margin: 120px 310px 0px 50px;*/ padding: 120px 310px 0px 50px; line-height: 1; width: 400px; height: 110px; } 一度、これで見てください。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IEしたら駄目です。 そのページは互換モードで起動しますから、IE専用--IEの互換モードです。IE以外のすべてのブラウザでずれます。 DOCTYPEスイッチを書き換えて、標準モードで動かせば、IEでもずれます。 DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a ) 受け取るときは最低限 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) でチェック位はしましょう。 原因は、IEの互換モードでは、その要素のサイズをpadding辺の外側、borderの内側にとることにあります。本来はpadding辺の内側でなければならない。 tableのmarginを調整(0にして)して、外側のdivのpaddingの値を大きくしてみましょう。 firefox+firebug( https://addons.mozilla.jp/firefox/details/1843 )で修正してみたら、それでまともにはなります。 しかし、Another HTML-lint の指示に従って、大きな減点項目だけは修正しないとまずいです。 重大なエラーは Html Validator ( https://addons.mozilla.jp/firefox/details/249 ) でもチェックできます。
お礼
ありがとうございます。 参考にさせていただいて勉強します。 感謝します。
お礼
ありがとうございます。 完璧に治りました。 本当に感謝します。