編寫html頁面時常見的問題(一)

来源:http://www.cnblogs.com/xcaocao/archive/2016/06/27/5620756.html
-Advertisement-
Play Games

<img class="desc_img" src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=html&step_word=&pn=0&spn=0&di=87025285600&pi=&rn=1&tn=baid... ...


     說到寫頁面,肯定有很多人在剛接觸編寫頁面這一塊時遇到很多細節和相容性的問題,那麼在這裡我總結一些經常遇到的小問題。希望能夠幫助學習頁面搭建的初學者!

     雖然說ie6很多公司都已經拋棄,但是個人認為,初學者想要學好頁面的搭建,典型的相容性還是很有必要知道的!所以這裡我就先說ie6的一個經典的相容性問題!

     ie6雙邊距問題

     產生環境:當盒子外邊距方向和浮動方向相同,在ie6瀏覽器中,一定會出現雙倍邊距問題

    例如:css如下

<style type="text/css">

	.chrome,.ie{width:100px;height:100px;background:pink;}
	.ie{float:left;margin-left:100px;}
	.chrome{margin-left:100px;}
	.clearfix{clear:both;}
</style>

    html如下

<body>
	<div style="margin:20px 0 0 20px;background:#ccc;height:500px;">
    	<div class="ie">ie6</div>
    <div class="clearfix"></div>
    <div class="chrome">高版本</div>
    </div>
</body>

    以上:類名為.ie的盒子不僅左浮動了,而且還使用左邊的外邊距;但是類名為.chrome的盒子只使用了外邊距,並沒有浮動;

    在高版本瀏覽器預覽的時,是沒有問題的,如下:

   

但是如果在ie6下,同時使用浮動和外邊距的盒子,並且方向相同的這個盒子就問出現雙倍邊距問題,如下:

這個就是雙倍邊距的問題!

解決辦法:

在出現問題的盒子上加  _display:inline;這個屬性,屬性前面加上下劃線,表示的是只有ie6去識別這個屬性。

 

接下來就說說在ie瀏覽器中,一張圖片假設有超級鏈接的話,在ie中顯示的樣式!

圖片鏈接在ie中有邊框

產生環境:給圖片添加超級鏈接,並且有href屬性

例如:一張圖片不加超鏈接,一張圖片加了超鏈接

<body>
<img src="1.jpg" width="230" height="225" />
<a href="#" class="chrome"><img src="1.jpg" width="230" height="225" /></a>
</body>

 在其他瀏覽器中沒什麼問題,如下

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 近日,Yelp的SRE工程師Dmitriy Samovskiy發表了一篇標題為 《新時代的運維》 的文章,文章中他簡要介紹了在雲計算大環境下,運維工作重心和角色的變化。 其實在6年前,Dmitriy就寫過一篇關於 DevOps趨勢 的文章,在那篇文章中,他認為系統管理人員需要具有簡單腳本之外的開發能 ...
  • for...in迴圈在運行時出錯了錯誤,並沒有要求枚舉對象的修改與當前保持一致。事實上,ES對併發修改在不同js環境下的行為的規範留有餘地。標準規定: 如果被枚舉的對象在枚舉期間添加了新的屬性,那麼在枚舉期間並不能保證新添加的屬性能被訪問。 上面規範的實際後果:如果我們修改了被枚舉的對象,則不能保證... ...
  • 3.事件和動畫 A. 事件 Aa. DOM載入 1.為什麼使用jQuery載入DOM方法? 以javascript的window.onload()方法載入DOM的先決條件是:必須等待被請求頁面的資源全部載入完成,才會為DOM元素添加事件行為;而jquery只要DOM元素載入完成,就立刻綁定事件 2. ...
  • //獲取到當前時間 Date date=new Date(); DateFormat format=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String time=format.format(date); ...
  • <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> </head> ...
  • <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> </head> ...
  • 使用sui mobile做的選擇控制項,其中sm.js有修改,增加自定義api,詳情請看index.html的註釋,不多說了,上代碼 引用文件及demo:http://pan.baidu.com/s/1i5tuuzz ...
  • 1、JS中的記憶體空間分為兩種:棧記憶體、堆記憶體 棧記憶體:提供JS代碼執行的環境;存儲基本數據類型的值; ->全局作用域或者私有的作用域其實都是棧記憶體 堆記憶體:存儲引用數據類型的值(對象是把屬性名和屬性值存儲進去,函數是把函數體中的代碼當做字元串存儲進去) 2、當瀏覽器載入我們HTML頁面的時候,首先會 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...