왜이 버튼으로 인해 내 레이아웃이 깨지나요?

이 CSS 버튼을 회사 웹 사이트에 넣기 위해 수정했으나 구현하려고 할 때마다 전체 웹 사이트가 가운데 맞춤을 잃게됩니다.왜이 버튼으로 인해 내 레이아웃이 깨지나요?

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

여기

는 CSS입니다 : 여기

는 HTML입니다

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 코드를 추가하자마자 페이지의 가로 정렬이 모두 취소됩니다. 나는 그것과 함께 혼란해야하는 무엇이라도보고있는 ont가 아니다.

#site div를 제거하고 있습니다. http://bluebeam.com/us/support/

출처

2012-08-30 Andrew Richardson

버튼이 포함 된 div를 닫으시겠습니까? – cstack

당신은 모든 테두리 등을 제거하려고 했습니까? 나는 그 사이트를 열었고 어떤 버튼에 대해 이야기하고 있는지 말할 수 없다. 문제를 보여줄 수있는 테스트 사이트가 있습니까? – Malachi

예, 위의 html은 어떻게 든 중단되었습니다. 나는 html을 코드에 추가하여 사이트를 중단 할 필요조차 없으며, html을 지정하지 않고 CSS를 추가하기 만하면 어떤 이유로 #site CSS를 덮어 씁니다. –

나는 이것이 해결되었다는 것을 알고 있지만, 여기에 CSS와 관련된 마지막 닫기 괄호 뒤에 보이지 않는 특수 문자가 있음을 알 수 있습니다. 즉, 너비가 0 인 공백 (U+200B)입니다.

출처

2012-08-30 19:38:04 bfavaretto

흥미 롭습니다. 어떻게 이런 일을 발견합니까? –

당신의 자신의 대답은 저를 생각하게했습니다. 확인을 위해 "편집"텍스트 영역에서 코드를 복사하고 텍스트 편집기에 붙여 넣은 다음 보이지 않는 문자를 표시하는 옵션을 설정했습니다 (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

왜이 버튼으로 인해 내 레이아웃이 깨지나요?

답변

관련 문제