ホームページ > 記事 > ウェブフロントエンド > フロントエンドマスターに見てもらってください。私のテーブルタブはIEでは効果がなく、スタイルがめちゃくちゃです。他のブラウザでは正常に動作するのですが、原因が分かりません。 _html/css_WEB-ITnose
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 を使用して調整してみてください。たくさんのコードを見るとめまいがして、読むのが嫌になります。