如何找出瀏覽器選擇忽略的無效HTML？

例如，在下面的HTML ...如何找出瀏覽器選擇忽略的無效HTML？

<form name="outerform"> 
    <input type="text" name="outer1"/> 
    <input type="text" name="outer2"/> 

    <div> 
    <form name="innerform" method="post" action="#"> 
     <input type="text" name="inner1"/> 
    </form> 
    </div> 
</form>

Firefox會簡單地扔掉innerform<form>標籤，因爲形式不能嵌套。

我在修補一些遺留代碼時遇到了這個問題。有人放置了幾乎覆蓋整個body內容的<form>標籤。當我添加了我自己的，更加本地化的<form>時，Firefox刪除了內部標記，並且我的提交將轉到外部表單。因爲我正在做一些jQuery處理來創建我的提交網址，所以我認爲這是我的錯誤。在Firebug的HTML選項卡中查看呈現的HTML後，我意識到了這個問題。

如果瀏覽器或Firebug有一個「被忽略的HTML」標籤，或者一些這樣的方法，我會立即挑選出來。我不能簡單地做一個查看源代碼，並將其粘貼到W3C的基於Web的驗證服務，原因如下：

出於安全考慮，在開發計算機我在沒有連接到公共互聯網。
Firebug的HTML選項卡顯示呈現的HTML，因此無效的HTML標記已被刪除。

最後，編輯器（Eclipse）通常是我找到像這樣的錯誤的地方。但是我們使用了很多包含的文件和Tiles框架，因此您一次只能看到最終HTML頁面的一個片段。

來源

2011-12-29 Vik David

Firefox的view-source不顯示呈現的HTML;如果我把你的測試用例這樣的東西顯示'

謝謝，我糾正了這個問題。我的意思是Firebug的HTML選項卡，而不是視圖源。 – 2012-01-05 14:38:35

我找到了我的解決方案。感謝Boris Zbarsky對我指引正確方向的評論。 view-source顯示下載的HTML，但Firebug DOM檢查器顯示呈現的HTML（我在問題中誤解了這兩個HTML）。解決方案：

做一個查看源代碼，並保存文件（文件1）
打開Firebug的DOM Inspector，右鍵單擊頂級元素<html>，複製HTML，並保存到文件（文件2）
使用diff工具比較這兩個文件。在圖形比較工具中，文件2將顯示瀏覽器忽略/移除HTML的空白。

重新格式化這兩個文件中的HTML可能會使差異更容易。

來源

2011-12-30 03:59:08

如果它無效，則無法知道瀏覽器將如何反應;因此在an HTML Validator中列出的任何被破壞的應該可能是固定的。

您可以離線驗證HTML;例如，我使用的plugin for Coda可以脫機驗證HTML。

來源

2011-12-29 21:55:09 Wex

如果您有wget工具，那麼獲取服務器生成的HTML的精確副本是非常實用的。即使查看源代碼功能並不總是告訴你到底下載了什麼（也許是現在，但是當服務器沒有正確執行時，我花了幾個小時看着「有效」的代碼。）

你可以得到wget來自SourceForge.net上的mingw工具的MS-Windows。在Linux下，它可能已經安裝，如果不是在你的倉庫中搜索它。

來源

2014-06-09 21:25:14

如何找出瀏覽器選擇忽略的無效HTML？

回答

相關問題