如何在網頁正文的所有元素周圍添加邊框？

我的網站在手機右側出現一些奇怪的白色空間。我想知道是否有CSS技巧爲網頁正文中的所有html元素添加邊框，以便我可以確定哪些元素正在伸出並在移動設備上產生空白區域。如何在網頁正文的所有元素周圍添加邊框？

謝謝

'* {border：1px solid redl}' – 2014-10-05 20:08:43

您也可以檢查元素以查找有問題的元素。發佈一個鏈接，我們其中一個人將爲您檢查。 – Vector 2014-10-05 20:13:35

與Vector一致。如下面的答案，您可以使用* {}來選擇頁面上的所有內容，但我相信這會顯着影響您的頁面加載時間。你應該找到這個原因並解決它。 – Kwestion 2014-10-05 20:15:34

你可以試試這個CSS代碼片段：

* { border: 1px solid black; }

每一個元素現在應該得到一個邊界。當心，這意味着一切。希望它能幫助你找出你應用中的空白區域！

將CSS代碼片段包含在CSS文件之前，以便它可以被覆蓋 - 或者之後，將其強制到每個元素上。

2014-10-05 20:09:57

每個元素都會得到一個血腥的邊框，並且邊框將被計算爲元素寬度。 '盒子大小：邊框;'將有助於暫時防止一團糟。 – 2014-10-05 20:11:13

嘗試

* {outline : 1px solid red; }

*是一個全球性的選擇，而outline不會與你的元素位置的混亂，這將只需添加一個1px的紅色輪廓

另外，還要確保你使用一個CSS復位（通常機身默認爲8像素邊距http://www.w3.org/TR/CSS21/sample.html）

您可以調整窗口大小，打開調試控制檯並檢查可能導致問題的元素。看一下樣式面板並測試編輯樣式，直到得到解決。在Chrome的控制檯中，您還可以使用仿真選項來測試您的頁面是否適用於不同的設備。

2014-10-05 20:12:29

這不回答問題。大綱不是邊界。輪廓可能比邊界更好，但這可以在評論或P.S.中說出。 – 2014-10-05 20:20:30

* { 
    border-style: 2px 3px solid dashed #3A5FCD; 
}

2016-12-01 14:10:00 Gowshigan

請使用[編輯]鏈接說明此代碼的工作原理，不要只給代碼，因爲解釋更有可能幫助未來的讀者。 – 2016-12-01 19:56:23

回答