ホームページ  >  記事  >  ウェブフロントエンド  >  フロントエンドマスターに見てもらってください。私のテーブルタブはIEでは効果がなく、スタイルがめちゃくちゃです。他のブラウザでは正常に動作するのですが、原因が分かりません。 _html/css_WEB-ITnose

フロントエンドマスターに見てもらってください。私のテーブルタブはIEでは効果がなく、スタイルがめちゃくちゃです。他のブラウザでは正常に動作するのですが、原因が分かりません。 _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:38:331629ブラウズ

Google
IE

<!----------------------------二手设备->出售信息------------------->                                    <div class="box" style="margin-top:40px;">						    			    <div id="tab" style="width:400px;">					<div class="shebei">					<div class="sb">二手设备</div>					<ul class="tab_menu" style="margin-left:95px;width:400px;">				    	<li class="F E">出售信息</li>				    	<li class="E selected">泵车</li>				        <li class="E">搅拌车</li>				        <li class>其他</li>				    </ul>				    </div>				    <div class="tab_box">				    	<div>				    					    	</div>				    					    	<div>				    	<volist name="handbengche" id="vo">				    	<a href="__URL__/selldetails?id={$vo[id]}"><p>[{$vo[oripurdate]}]<span style="margin-left:60px;">{$vo[name]}</span><span style="float:right;">[{$vo.productlocated}]</span></p><br></a>							            </volist>				    	</div>				        <div class="hide">				        <volist name="handjiaobanche" id="vo">				        <a href="__URL__/selldetails?id={$vo[id]}"><p>[{$vo[oripurdate]}]<span style="margin-left:60px;">{$vo[name]}</span><span style="float:right;">[{$vo.productlocated}]</span></p><br></a>				         </volist>				        </div>				        <div class="hide">				        <volist name="handqita" id="vo">				        <a href="__URL__/selldetails?id={$vo[id]}"><p>[{$vo[oripurdate]}]<span style="margin-left:60px;">{$vo[name]}</span><span style="float:right;">[{$vo.productlocated}]</span></p><br></a>				        </volist>				        </div>				    </div>				</div>			    												<!----------------------------二手设备->求购信息------------------->				<div id="tab" style="margin-top:20px;margin-left: 430px;width:400px;">				    <div class="shebei">				   					<ul class="tab_menu" style="margin-left:20px;margin-top:-20px;width:400px;">				    	<li class="F E">求购信息</li>				    	<li class="E selected">拖泵</li>				    	<li class="E">泵车</li>				        <li class="E">搅拌车</li>				        <li>其他</li>				    </ul>				    </div>				    <div class="tab_box">				    	<div></div>				    	<div></div>				    				    					    	<div>				    	<volist name="handqiubengche" id="vo">				    	<a href="__URL__/rentinfo?id={$vo.id}"><p>[{$vo[publishtime]|date="Y-m-d",###}]<span style="margin-left:60px;">{$vo[name]}</span><span style="float:right;">[{$vo.location}]</span></p><br></a>							            </volist>				    	</div>				        <div class="hide">				        <volist name="handqiujiaobanche" id="vo">				        <a href="__URL__/rentinfo?id={$vo.id}"><p>[{$vo[publishtime]|date="Y-m-d",###}]<span style="margin-left:60px;">{$vo[name]}</span><span style="float:right;">[{$vo.location}]</span></p><br></a>				         </volist>				        </div>				        <div class="hide">				        <volist name="handqiuqita" id="vo">				        <a href="__URL__/rentinfo?id={$vo.id}"><p>[{$vo[publishtime]|date="Y-m-d",###}]<span style="margin-left:60px;">{$vo[name]}</span><span style="float:right;">[{$vo.location}]</span></p><br></a>				        </volist>				        </div>				    </div>				</div>	      				      					<!---------------------------------------二手车估价计算器-------------------------------->								<div class="quick_search">						<div class="search1">							    二手车估价计算器						</div>						<div class="gujia">							<p style="color:#646464;font-size: 14px; margin-top: 20px;margin-left: 10px;">二手车车价评估</p>							<input value="  选择品牌和车型" class="i1">							<input value="  车辆入手时间" class="i1">							<input value="估一下" class="i2" type="button">						</div>					</div>								   </div>


ディスカッションへの返信 (解決策)

id=tab を class=tab に変更します。margin-left:430px は推奨されません。class=tab のスタイルを float に変更することはできます。 left; そして float をクリアします

id=tab を class=tab に変更します。margin-left:430px は推奨されません。class=tab のスタイルを float:left に変更してから、それを変更します。 float:left のスタイルがまだ汚いのはなぜですか? js 効果があります

固定幅がないように感じます

下のブロックの幅と高さを固定してみることをお勧めします。テキストは折り返されません

幅と高さを固定してみることをお勧めします。下のブロックのテキストが折り返されません。

幅が縮小されているのはなぜですか?

ボックスを設計するときは、互換性を考慮してください。

528ed792d87f34b66aeff9dfa4363d7c中古機器16b28748ea4df4d9c2150843fecfba68
cc9a94d7db06ffc17d86990fb65d5ce8販売情報bed06894275b65c1ab86501b08a632eb

c2e08c8b31597de549aee9fb441df82dその他< ;/li&gt; ul と li は浮動要素であるため、内層がコンテナを超えると、予測できない状況が発生します。
したがって: ul の幅を外側の div (つまり、class=shebei) よりも大きく設定でき、class=shebei の div を設定する必要があります: overflow:hidden


URL を設定し、firebug を使用して調整してみてください。たくさんのコードを見るとめまいがして、読むのが嫌になります。

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