2011-09-11 18 views
10

Về cơ bản những gì nó làm là hiển thị các góc trên cùng bên phải và dưới cùng bên phải thay vì các góc trên cùng bên trái/dưới cùng chính xác.Internet Explorer 9 (và 10) đang hiển thị các góc tròn của tôi về phía sau

Đây là css:

.formlabel, .formlabel2, .formhead{ 
    width:200px; 
    font-size:18px; 
    height:22px; 
    font-weight:normal; 
    background-color:#FF8000; 
    text-align:right; 
    margin-top:5px; 
    padding-right:1px; 
    border:none; 
    color:white;  
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
} 

Từ những gì tôi đã có thể suy ra, nó sẽ xảy ra bởi vì họ đang trong một lớp có thuộc tính direction:rtl. Nếu tôi thêm direction:ltr vào các lớp ở trên thì các góc sẽ được làm tròn chính xác. (Bạn có thể thử điều này bằng cách sử dụng mã ở trên và thêm direction:rtl)

Vấn đề là trang web bằng tiếng Do Thái nên tôi cần nó ở lại rtl.

Bất kỳ ý tưởng nào?

+3

Ngu ngốc _stupid_ Nhà phát triển IE. Chỉ một chút phù hợp sẽ tốt đẹp bây giờ và sau đó. – Bojangles

+0

Có lẽ bạn có thể sử dụng vị trí tuyệt đối để ngăn xếp hai phần tử và đặt nền và đường viền và hướng: ltr đến phần tử thấp hơn và tất cả nội dung rtl trên phần tử phía trên? – Neil

Trả lời

1

Tôi đã nghĩ rằng một giải pháp đơn giản sẽ là đặt một chú thích có điều kiện trong <head> cho IE9 + để sử dụng css mà bạn đã đảo ngược.

<!--[if gte IE 9]> 
    <style> 
     .formlabel, .formlabel2, .formhead{ 
      border-top-right-radius: 5px; /* switched from left */ 
      border-bottom-right-radius: 5px; /* switched from left */ 
     } 
    </style> 
<![endif]--> 

Nếu bạn thích, thay vì sử dụng style trong nhận xét có điều kiện, bạn có thể liên kết tới biểu định kiểu bên ngoài riêng biệt thay thế.

+1

Nhận xét có điều kiện không được hỗ trợ trong IE10. – duri

+0

@duri: Điều đó thật thú vị. Mặc dù nó vẫn sẽ làm việc cho IE9, và hy vọng bởi thời gian IE10 được hoàn thành, nó sẽ được sửa chữa, giả sử có ai đó thông báo cho họ về vấn đề này. – tw16

+1

@jontsef: Như tôi nghĩ ban đầu, đã thử nghiệm trong IE10 lỗi đã được sửa, do đó, câu lệnh có điều kiện ở trên sẽ hoạt động cho IE9. Do đó vấn đề được giải quyết :) – tw16

Các vấn đề liên quan