2008-09-15 28 views
19

Tôi có khung nội tuyến. Nội dung rộng hơn chiều rộng tôi đang đặt để khung nội tuyến có thanh cuộn ngang. Tôi không thể tăng chiều rộng của khung nội tuyến vì vậy tôi muốn chỉ xóa thanh cuộn. Tôi đã thử đặt thuộc tính cuộn thành "không" nhưng điều đó giết chết cả hai thanh cuộn và tôi muốn thanh dọc. Tôi đã cố gắng thiết lập tràn-x để "ẩn" và đã giết chết thanh cuộn ngang trong ff nhưng không phải trong IE. buồn cho tôi.Bạn không thể xóa thanh cuộn ngang trong iframe trong IE?

Trả lời

43
scrolling="yes" horizontalscrolling="no" verticalscrolling="yes" 

Đặt điều đó vào thẻ iFrame của bạn.

Bạn không cần phải lộn xộn xung quanh khi cố định dạng trong CSS.

+1

zOMG. Trong khi các thuộc tính horizontalscrolling và verticalscrolling xuất hiện hoàn toàn không có giấy tờ trên MSDN, điều này đã làm việc để giải quyết vấn đề IE 6 của tôi. –

+1

Giải pháp tuyệt vời, chính xác những gì tôi đang tìm kiếm, tyvm. – David

+0

Có sự cố trên IE10 (có khách hàng của chúng tôi vẫn sử dụng nó) nơi chúng tôi hiển thị một số quảng cáo HTML5 tùy chỉnh trong iframe. Làm điều này lừa đã không làm việc cho chúng tôi ... – lkartono

5

Bạn có thể thử đặt iframe bên trong div và sau đó sử dụng div cho cuộn. Bạn có thể kiểm soát việc di chuyển trên div trong IE mà không có vấn đề gì, IE chỉ thực sự có vấn đề với cuộn iframe. Dưới đây là một ví dụ nhanh mà nên làm các trick.

<html> 
    <head> 
     <title>iframe test</title> 

     <style>   
     #aTest { 
      width: 120px; 
      height: 50px; 
      padding: 0; 
      border: inset 1px #000; 
      overflow: auto; 
     } 

     #aTest iframe { 
      width: 100px; 
      height: 1000px; 
      border: none; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="aTest"> 
      <iframe src="whatever.html" scrolling="no" frameborder="0"></iframe> 
     </div> 
    </body> 
</html> 
+0

Cảm ơn bạn đã giải pháp này. Vấn đề duy nhất là bạn phải xác định chiều cao cố định cho nội dung khung nội tuyến, mà trong trường hợp của tôi sẽ thay đổi. Tôi sẽ sử dụng điều này và sẽ phải chỉ định một chiều cao cực lớn cho iframe đó là kinda hacky. Nhưng cảm ơn rất nhiều điều này đã cho tôi ở đó. – mrjrdnthms

24

Thanh cuộn không phải là thuộc tính của , đó là thuộc tính của trang chứa. Thử đặt overflow-x: hidden trên phần tử <html> của trang bên trong.

+1

hoạt động với phần tử cơ thể. Cảm ơn! –

+2

giải pháp này tốt hơn rất nhiều để giữ mã khung nội tuyến sáng và ủng hộ đóng gói. tôi không cần phải nhớ thêm và nhớ cú pháp. –

+3

Tôi đồng ý với @DannyG. Chúng tôi đã di chuyển qua thời đại thuộc tính bản trình bày trong đánh dấu của chúng tôi. Các giải pháp CSS tinh khiết thích hợp hơn vì một số lý do. – DuxPrime

0
<iframe style="overflow:hidden;" src="about:blank"/> 

sẽ hoạt động trong IE. IE6 có vấn đề hỗ trợ overflow-x và overflow-y.

Một điều khác cần lưu ý là biên giới của IE trên khung nội tuyến chỉ có thể bị xóa nếu bạn đặt thuộc tính "frameborder" trong camelCase.

<iframe frameBorder="0" style="overflow:hidden;" src="about:blank"/> 

sẽ rất tuyệt nếu bạn có thể tạo kiểu phù hợp với CSS nhưng không hoạt động trong IE.

+0

Trong trường hợp của tôi, tôi muốn loại bỏ thanh cuộn x nhưng không phải y và tôi tin rằng thiết lập tràn ẩn sẽ loại bỏ cả hai. Tôi có đúng không? – mrjrdnthms

0

Tất cả các giải pháp này không phù hợp với tôi hoặc không thỏa đáng. Với DIV có thể cuộn, bạn có thể làm cho thanh cuộn ngang biến mất, nhưng bạn sẽ luôn có thanh cuộn dọc.

Vì vậy, đối với trang web của tôi, nơi tôi có thể chắc chắn kiểm soát chiều cao cố định của tất cả các iframe, giải pháp sau hoạt động rất tốt. Nó chỉ đơn giản ẩn thanh cuộn ngang với một DIV :)

<!-- This DIV is a special hack to hide the horizontal scrollbar in IE iframes --> 
<!--[if IE]> 
<div id="ieIframeHorScrollbarHider" style="position:absolute; width: 768px; height: 20px; top: 850px; left: 376px; background-color: black; display: none;"> 
</div> 
<![endif]--> 
<script type="text/javascript"> 
    if (document.getElementById("idOfIframe") != null && document.getElementById("ieIframeHorScrollbarHider") != null) 
    { 
    document.getElementById("ieIframeHorScrollbarHider").style.display = "block"; 
    } 
</script> 
0

Bạn cũng có thể thử thiết lập chiều rộng của cơ thể của trang đó là bao gồm bên trong iframe đến 99%.

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