2

我修改了这个 CSS 按钮以放在我公司的网站上，但每次我尝试实现它都会导致整个网站失去中心对齐。

这是HTML：

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

​</p>

这是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/

4

2 回答 2

3

我知道这已解决，但这就是您遇到此问题的原因：在 CSS 的最后一个右大括号之后有一个不可见的特殊字符，特别是零宽度空格（U+200B）。

于 2012-08-30T19:38:04.517 回答
0

修复。不太确定为什么，但逐行添加 CSS 使其不会中断。我还将类名更改为 support_btn 以确保它不会与 Global 标头冲突，尽管此时已修复。

我确实排除了一些我不需要的行：

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

但我真的看不出这些会有什么不同。

于 2012-08-30T19:09:45.120 回答