2012-09-02 3 views
2

나 자신을 운전하고 있습니다!.테이블의 모질라 경계선 반경이 일관되게 작동하지 않습니다

먼저 국경 반지름 앞에 접두어를 붙일 필요가 없다는 것을 명확히 할 수 있습니까? 예 : -moz-. 그러나 오래된 브라우저가 사용되는 경우에 그렇게하는 것이 좋은 습관입니까?

둘째 나는 국경 붕괴가 붕괴되지 않는 테이블 수요 내부 테두리의 반경을 채용에 나는 또한 국경 간격이 0

다음 초안 CSS하지해야한다고 생각합니다 & HTML 멋지게 둥근 테이블을 생성하는 동의 모질라를 제외한 모든 브라우저의 요소는 어떤 이유로 테이블이 반올림되지만 반올림되지만 td는 모두 사각형입니다.

불의 버그는 반경이 적용되었다고보고합니다. 실제로 배경색을 td에 배치하면이 배경이 둥글게 보인다는 것을 알 수 있습니다. 그러나 나머지는 사각형으로 표시합니다.

모든 의견 ???

/* borders */ 

#booking_Form_Wrapper{ 
    border: 0px; 
    padding: 0px; 
    margin: 0px; 
} 

#booking_Table{ 
    width: 300px; 
    height: 400px; 
    background-color: #a5a5a5; 
    border-radius: 14px; 
    border-spacing: 6px 6px; 
} 

#booking_Table th{ 
    border-radius: 10px; 
} 

#booking_Table td{ 
    border-radius: 10px; 
} 

/* other styles */ 

은 HTML은

<table id="booking_Table"> 
    <thead id="booking_Title"> 
     <th> 
      Booking 
     </th> 
    </thead> 
    <tbody> 
     <tr id="booking_Session"> 
      <td> 
       <a>Class - Level</a><br /> 
       <a>Day and Date</a><br /> 
       <a>Start Time - End Time</a> 
      </td>     
     </tr> 
     <tr id="booking_XXXXXXX"> 
      <td style="border-radius: 6px;"> 
       <label>Do you want to XXXXXXXX</label><input type="checkbox"/> 
       <label>XXX</label><input type="radio" name="XXX" value="b"> 
       <label>XXX</label><input type="radio" name="XXX" value="s"> 
       <label>XXX</label><input type="radio" name="XXX" value="r"> 
      </td>   
     </tr> 
     <tr id="booking_Cancel"> 
      <td>     
      <P><span>Cancellation Policy</span> - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</P> 
      </td> 
     </tr> 
     <tr class="form_Footer"> 
      <td> 
       <input class="form_Submit" type="submit" name="submit" value="Make Booking"/> 
       <input class="form_Cancel" type="cancel" name="cancel" value="Cancel"/> 
      </td> 
     </tr> <!-- form footer --> 
    </tbody> 
</table> <!-- booking table --> 
다음

enter image description here

나는 해결책을 발견

enter image description here

+2

Firefox 및 Chrome에서 둥근 모서리가 보입니다. jsFiddle : http://jsfiddle.net/5JC2Z/2/ –

+1

어떤 FF 버전이 문제입니까? 그것은 FF 14.01에 나에게 잘 보인다 http://jsfiddle.net/5JC2Z/3/ –

+0

안녕하세요 @IliaRostovtsev 슬프게도 위의 편집하지 않습니다. 두 번 체크 된 방화 광구는 스타일링과 계산 된 상태가 반올림되어야하지만 그렇지 않습니다. – codepuppy

답변

1

최초의 사각 TD에 대한 불을 지르고 계산 된 스타일 정보입니다 - 나는하지 않을 수 있습니다 올바른 기술 용어로 그 효과는 포함하는 요소에 높이를 부여함으로써 FF에서 야기되었다. 내 경우에 <tr>. 흥미로운 점은 다른 브라우저에서이 점에 대해 불평하지 않고 <td>에 관계없이 적용된다는 것입니다. 나는 이것이 테두리가 지정되었는지 여부에 관계없이 반지름이 적용되는 요소의 배경에 반지름이 적용된다고 말하는 모질라 개발자 노트와 관련이 있다고 생각합니다. <tr>은 배경의 일부가 아니므로 반올림되지 않았습니다.

어쨌든 컨테이너에 높이와 모든 것을 제공하지 마십시오.

관련 문제