IE7에서 css로 앵커 및 스팬 숨기기

간단하게하기 위해 문서에서 내 문제를 강조하기 위해 스타일을 만들었습니다. 단추처럼 보이게하는 4 개의 링크 행이 있습니다. 다음 링크 (세 번째 항목) CSS를 사용하여 숨어 있습니다. IE8 +, Chrome, Firefox에서는 완벽하게 작동하지만 IE7에서는 취소 버튼과 수락 버튼 사이에 간격이 있습니다 (다음 버튼이있는 위치).IE7에서 css로 앵커 및 스팬 숨기기

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test Page</title> 
     <style type="text/css"> 
      .ButtonBar 
      { 
       margin-top: 20px; 
       text-align: center; 
      } 
      .LinkButton 
      { 
       background-color: #01699b; 
       border: 0px solid; 
       border-radius: 14px; 
       color: #fff; 
       cursor: pointer; 
       font-weight: bold; 
       height: 28px; 
       padding: 0px 11px 0px 11px; 
       overflow: hidden; 
       position: relative; 
       text-decoration: none; 
       display: inline-block; 
       line-height: 28px; 
      } 
      .NextButton 
      { 
       display: none; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="ButtonBar"> 
      <a class="PreviousButton"><span class="LinkButton">Previous</span></a> 
      <a class="CancelButton"><span class="LinkButton">Cancel</span></a> 
      <a class="NextButton"><span class="LinkButton">Next</span></a> 
      <a class="AcceptButton"><span class="LinkButton">Accept</span></a> 
     </div> 
    </body> 
</html>

당신이 같은, 난 그냥 모두가 내가 지금까지 뭘 오전 보여주기 위해 포함되었다 않는 배경 색상에서 떨어져 .LinkButton 클래스에서 모든 CSS를 제거합니다.

이 문제를 해결하려면 어떻게해야합니까?

출처

2013-02-14 cw_dev

링크를 떠 다니면 어떻게됩니까? – Pete

왼쪽 플로트가 작동합니다. 공간을 확보하기 위해 여백을 추가해야한다고 생각합니다. 그러나 "단추 막대"내에서 단추를 가운데 정렬하려면 어떻게해야합니까? –

아, 왼쪽 float을 사용할 수 없습니다. – Pete

이 공간이 실제로 어디에서 왔는지 궁금하지 않으셨습니까?

인라인 요소 간의 줄무늬가있어 <a>에 간격이 있습니다. 당신이 당신의 요소 사이에 실제로 2 바꿈이 때문에

<div class="ButtonBar"> 
     <a class="PreviousButton">...</a> <!-- Linebreak! --> 
     <a class="CancelButton">...</a> <!-- Linebreak! --> 
     <a class="NextButton">...</a>  <!-- Linebreak! --> 
     <a class="AcceptButton">...</a> <!-- Linebreak! --> 
    </div>

이제 최신 브라우저 붕괴 이러한 여러하지만, IE7은 격차가 두 배 넓은 것으로 원인,하지 않습니다.

1) 요소

2) 수정 마크 업 부동 :

 <!-- end tag on the new line --> 
    <a>... 
    </a><a>... 
    </a>... 

    <!-- comments in between --> 
    <a>...</a><!-- 
    --><a>...</a> 

    <!-- all on one line --> 
    <a>...</a><a>...</a> 

    <!-- In some cases (e.g. list elements) you can skip the end tag -->

3) 수정 글꼴

4)를 사용하여 음의 여백 크기

이에 대한 몇 가지 솔루션을 가지고 하지만 그건 구형 브라우저에서 문제를 일으킬 수 있습니다.

당신이 원하는 해결책은 당신에게 달려 있습니다.

특별한 경우에 해당 요소를 숨기려면 절대 position 또는 해당 요소에 float을 선언 할 수 있습니다.

출처

2013-02-14 10:40:11 Christoph

완벽한 하나의 라인 접근 방식이 쉬운 해결책으로 보입니다. 많은 감사합니다. –

하나의 해결책은 float : .NextButton CSS 클래스에만 남겨 둡니다. 이것은 효과가있다.

출처

2013-02-14 10:42:11

+1 일반적인 문제는 해결되지 않지만이 특별한 경우에는 작동합니다.) – Christoph

IE7에서 css로 앵커 및 스팬 숨기기

답변

관련 문제