這個按鈕爲什麼會導致我的佈局中斷？

我修改了這個CSS按鈕來放在我公司的網站上，但每次我嘗試實現它時，都會導致整個網站失去它的中心對齊。這個按鈕爲什麼會導致我的佈局中斷？

下面是HTML：

<div id="contain"> 
<button class="support"> </button>

這裏是CSS：

button.support { 
background: rgb(38,128,195); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(38,128,195,1) 11%, rgba(30,101,155,1) 99%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,rgba(38,128,195,1)), color-stop(99%,rgba(30,101,155,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(38,128,195,1) 11%,rgba(30,101,155,1) 99%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(38,128,195,1) 11%,rgba(30,101,155,1) 99%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(38,128,195,1) 11%,rgba(30,101,155,1) 99%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(38,128,195,1) 11%,rgba(30,101,155,1) 99%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2680c3', endColorstr='#1e659b',GradientType=0); /* IE6-9 */ 
border-top: 1px solid #38538C; 
border-right: 1px solid #1F2D4D; 
border-bottom: 1px solid #151E33; 
border-left: 1px solid #1F2D4D; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
-webkit-box-shadow: 0 6px 0px #1F3053, 0 8px 4px 1px #111; 
-moz-box-shadow: 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; 
box-shadow: 0px 1px 0 #1D2C4D, 0 6px 0px #1F3053, 0 8px 4px 1px #111; 
color: white; 
font: bold 20px "helvetica neue", helvetica, arial, sans-serif; 
line-height: 1; 
margin-bottom: 10px; 
padding: 10px 0 12px 0; 
text-align: center; 
text-shadow: 0px -1px 1px #1E2D4D; 
height: 175px; 
width: 175px; 
-webkit-background-clip: padding-box; 
transition: all 200ms; 
-moz-transition: all 200ms; /* Firefox 4 */ 
-webkit-transition: all 200ms; /* Safari and Chrome */ 
-o-transition: all 200ms; /* Opera */ 
} 

button.support:hover { 
    -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; 
    -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; 
    box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; 
    cursor: pointer; } 

    button.support:active { 
    -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; 
    -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; 
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; 
    margin-top: 4px; }

我試着從輸入到超鏈接改變它，但它不改變任何東西，只要我添加CSS代碼，它就會撤銷頁面上的所有水平對齊。儘管如此，我仍然看到任何應該讓它混亂的東西。

它以某種方式擺脫#site div。我不知道爲什麼它這樣做...

這就是我想實現它的頁面：http://bluebeam.com/us/support/

來源

2012-08-30 Andrew Richardson

你正在關閉包含按鈕的div嗎？ – cstack

你有沒有嘗試刪除所有的邊界等？我打開了那個網站，我不知道你在說什麼按鈕？你有一個可以顯示問題的測試網站嗎？ – Malachi

是的，上面的html被切斷了。我甚至不需要在代碼中添加html來打破網站，我只是添加沒有任何html地址的CSS，並且由於某種原因覆蓋了#site CSS。 –

我知道這個問題已經解決了，但這是您遇到這個問題的原因：您的CSS最後一個右大括號後面有一個看不見的特殊字符，具體地說是一個零寬度空間（U+200B）。

來源

2012-08-30 19:38:04 bfavaretto

有趣。如何找到這樣的事情？ –

你自己的回答讓我想到了這一點。爲了確認，我複製了代碼（從「edit」textarea）並粘貼到文本編輯器中，然後打開選項以顯示不可見字符（我使用了TextMate）。 – bfavaretto

固定它。不太確定爲什麼，但是逐行添加CSS代碼使它不會中斷。我還將類名更改爲support_btn，以確保它與全局標題不衝突，儘管此時已修復此標題。

我沒有排除，我並不需要幾行：

text-align: center; 
text-shadow: 0px -1px 1px #1E2D4D; 
color: white; 
font: bold 20px "helvetica neue", helvetica, arial, sans-serif;

但我真的不能看到這些會有所作爲。

來源

2012-08-30 19:09:45

這個按鈕爲什麼會導致我的佈局中斷？

回答

相關問題