ホームページ >ウェブフロントエンド >htmlチュートリアル >ブラウザのスタイル互換性の問題について_html/css_WEB-ITnose
ブラウザのスタイル互換性の問題について_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-06-24 12:14:38932ブラウズ
ボタン送信レイアウトを作りたいのですが、Chrome17とIE9では入力とボタンが同じ行に表示されますが、Firefox13.0.1とOpera12.01ではボタンが上にはみ出してしまいます。 、inputとButtonが同じ行に表示されない FirefoxとOperaに対応した（非対応でも構いません）このCSSの書き方を専門家の皆様にお聞きしたいです。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=7" /><title>Test</title><style type="text/css">#main { width: 300px; margin: 50px auto; border: 0px solid #000;}#main .inp { margin: 0px; padding: 0px; width: 200px; height: 30px; line-height: 30px; border: 1px solid #C7CCD1; border-right-width: 0px;}#main .btn { margin: 0px; height: 32px; border: 1px solid #C7CCD1; font-size: 14px;}</style></head><body> <div id="main"> <input type="text" class ="inp" /><button class ="btn" type="button">提交</button> </div></body></html> ディスカッションへの返信 (解決策)
<style type="text/css">#main { width: 300px; margin: 50px auto; border: 0px solid #000;}#main .inp { margin: 0px; padding: 0px; width: 200px; height: 30px; line-height: 30px; border: 1px solid #C7CCD1; border-right-width: 0px; float:left;}#main .btn { margin: 0px; height: 32px; line-height:32px; border: 1px solid #C7CCD1; font-size: 14px; float:left;}</style>
2 つの float を追加するだけです
080b747a20f9163200dd0a7d304ba388 #main {
マージン: 50px 自動;
ボーダー: 0px;
パディング: 0px;
高さ: 30px;
……
試してみました + 1
問題があります。btn に幅を追加します。たとえば、「width: 150px」とすると、ボタンが input タグの下に配置されます
コンテナー
#main {
幅: 300px;
は幅 300 しかありません、
150px+200px はやめられません
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。