谁能帮忙开导一下浏览器兼容问题,可烦死了。_html/css_WEB-ITnose
<html><head><meta name="keywords" content="博客,梁栋"/><meta name="author" content="梁栋"/><meta name="description" content="个人网站"/><meta http-equiv="Content-Type" content="text/html;charset=gbk"/><title>个人网站</title><style>body {margin : 0;padding 0;}.top_div {margin : 0;width :100%;height : 180px;background-color : yellow;}.top_main_div {width : 960px;height : 180px;background-color : blue;margin-left : 95px;float : left;}.top_log_div {width : 150px;height : 50px;background-color : white;float: right;text-indent : 20px;line-height : 50px;font-size : 20px;}.login {background : pink;padding : 0;margin-right : 20px;}.register {background : pink;padding : 0;}.menu_bar{background : green;width : 100%;height : 50px;}.menu {height : 50px;width : 700px;background : red;margin-left:95px;float : left;}.search_div {height : 50px;width : 100px;background : pink;float : left;}</style></head><body><div class="top_div"> <div class="top_main_div"> <div class="top_log_div"> <a class="login">登陆</a> <a class="register">注册</a> </div> </div></div><div class="menu_bar"> <div class="menu"></div> <div class="search_div"></div></div></body></html>
放在IE里是居中的,放在chrome,firefox里就偏左了,布局怎么解决浏览器兼容性的,求标准做法永久解除此类问题困扰。。
回复讨论(解决方案)
我在FF和ie8下看到的都是偏左的
你在定义top_main_div的样式时,不是按照居中显示定义的,而是按照1024*768的分辨率显示的,这样肯定有误差
<center class="top_div"> <div class="top_main_div"> <div class="top_log_div"> <a class="login">登陆</a> <a class="register">注册</a> </div> </div></center>
将最外层的 div 改成 center,然后修改相应的样式表,把float和margin-left去掉,即可居中显示了,但在 XHTML 1.0 Strict DTD 中好象不支持
恩。。。http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
这个链接里有答案,要设置display : inline。
display : inline
.top_main_div {width : 960px;height : 180px;background-color : blue;margin-left : 95px;margin:0 auto;}
要居中用 marginleft 和 marginright要同时设成auto,而且不能是浮动的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="keywords" content="博客,梁栋"/><meta name="author" content="梁栋"/><meta name="description" content="个人网站"/><meta http-equiv="Content-Type" content="text/html;charset=gbk"/><title>个人网站</title><style>* { margin: 0px auto; padding: 0px;}.top_div { width : 960px; height : 180px; background-color : yellow;}.top_main_div { width : 960px; height : 180px; background-color : blue; float : left;}.top_log_div { width : 150px; height : 50px; background-color : white; float: right; text-indent : 20px; line-height : 50px; font-size : 20px;}.login { background : pink; margin-right : 20px;}.register { background : pink;}.menu_bar{ background : green; width : 960px; height : 50px;}.menu { height : 50px; width : 700px; background : red; float : left;}.search_div { height : 50px; width : 100px; background : pink; float : left;}</style></head><body><div class="top_div"> <div class="top_main_div"> <div class="top_log_div"> <a class="login">登陆</a> <a class="register">注册</a> </div> </div></div><div class="menu_bar"> <div class="menu"></div> <div class="search_div"></div></div></body></html>
写css 要加上
nbsp;HTML>
....
实践多了自然就明白了。要像居中 body{margin:0px auto;} 外围的层.top_main_div{margin:0px auto;} 这个不算是bug兼容问题了,是你样式本身写法就有问题。
上面说的外围的层说错了,是新加一个最外围的层来包括所有的内部层,
学习了, 已经解决了, 谢谢大家.

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。
