將CSS邊框應用於不需要的元素（已嘗試刪除它）

我創建了一個200x200的方形div，並創建了一個虛線邊框來定義它。將CSS邊框應用於不需要的元素（已嘗試刪除它）

問題是，在它上面的div，完全不相關，也是應用了一個虛線邊框。如果我添加其他div，他們不會遇到問題。只是我的標題文本。

這是一張圖片！

an image http://i.stack.imgur.com/4qod6.png

這裏是使用Chrome開發工具它出現在文本你-webkit-text-stroke導致此錯誤的HTML/CSS

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<link rel="stylesheet" href="index.css" type="text/css" /> 
</head> 
<body> 

<div id="main"> 
<h1>Test Text</h1> 
</div> 
<div id="dropbox"> 
    <p>Drag and drop your file here!</p> 
    <img src="spinner.gif" /> 
</div> 
</body> 
</html> 

html { 
height: 100%; 
} 
body { 
height: 100%; 
font-family: "HelveticaNeue-Light", sans-serif; 
background: -webkit-gradient(linear, 0 0, 0 15%, from(#2B2B2B), to(#383838)); 
background: -moz-linear-gradient(100% 100% 90deg, #2B2B2B, #383838); 
margin: 0; 
background-repeat: no-repeat; 
} 
#main h1{ 
border: none; 
padding-top: 4em; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
font-size: 250%; 
text-decoration: none; 
color: #ffffff; 
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1))); 
-webkit-text-stroke: 1px white; 
text-shadow: 2px 2px 1px #292929; 
} 
#dropbox { 
border-style:dashed; 
border-width:5px; 
width:200px; 
height:200px; 
font-family: Georgia, "HelveticaNeue-Light", sans-serif; 
font-color: #222; 
font-size:105%; 
text-shadow: 0px 1px 1px #555; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
overflow: hidden; 
}

來源

2011-04-28 DislikesBorders

哈哈在你的名字。你的意思是文字有邊界？ – LostLin 2011-04-28 03:29:29

無法在IE中重現。你使用的是Chrome嗎？ – 2011-04-28 03:30:37

是的這個毛刺在Chrome中發生。我計劃沒有IE兼容性。 Ima Student - 如圖所示，是的，標題文字有邊框。 – DislikesBorders 2011-04-28 03:33:57

;可能是由於-webkit錯誤或其他原因。當我刪除它修復邊界問題，並不會影響文本。

來源

2011-04-28 03:34:33

我愛你！我希望我能投票了這個答案，但stackoverflow不會讓我。我想知道你是如何得到開發工具來告訴你的。我環顧四周，從我的開發工具中得不到任何東西... – DislikesBorders 2011-04-28 03:44:20

@DislikesBorders這個截圖顯示了我做了什麼。注意我是如何取消選中-webkit-text-stroke上的複選框：https：//picasaweb.google.com/117621119706045694917/ChromeDev#5600476390507204514 – 2011-04-28 03:49:52

Ahaa。猜測並檢查。教我一個很好的教訓，不要忽視看似明顯的解決方案。先生，你的帽子！ :) – DislikesBorders 2011-04-28 03:51:50

將CSS邊框應用於不需要的元素（已嘗試刪除它）

回答

相關問題