为什么这个按钮引起我的布局打破？ [英] Why is this button causing my layout to break?
问题描述
我修改这个CSS按钮可以把我的公司的网站，但每一次我尝试实施它，它会导致整个网站失去它的中心对准时间。
I modified this CSS button to to put on my company's website but every time I try to implement it it causes the whole website to lose it's center alignment.
下面是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 code将其撤消页面上的所有水平对齐方式改变什么。我看到ONT什么，应该惹它虽然。
I've tried changing it from an input to a hyperlink but it doesn't change anything, as soon as I add the CSS code it undoes all the horizontal alignment on the page. I'm ont seeing anything that should mess with it though.
它在某种程度上摆脱#Site展示股利。我不知道为什么它这样做...
It's somehow getting rid of the #site div. I'm not sure why it's doing that...
这是我想要实现它的页面： http://bluebeam.com/us/支持/
This is the page I'm trying to implement it on: http://bluebeam.com/us/support/
推荐答案
我知道这是解决了，但这里是你有这个问题的原因：你对你的CSS的最后一个大括号后一种无形的特殊字符，特别是，零宽度空间（ U + 200B ）。
I know this is solved, but here is the reason you were having this issue: you had an invisible special character after the last closing brace on your CSS, specifically, a zero-width space (U+200B).
这篇关于为什么这个按钮引起我的布局打破？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
