2009-03-10 34 views
26

Tôi đang sử dụng thư viện jQuery 1.3.2 và jQuery-ui-1.7 mới cùng với Hộp thoại giao diện người dùng. Tôi có một thẻ div với một số yếu tố hình thức (hộp văn bản, hộp kiểm, vv) trong đó. Khi tải trang, jQuery hiển thị div làm hộp thoại. Điều này hoạt động hoàn toàn tốt trong FF, nhưng trong IE, chiều cao của div là sai. Nó chỉ hiển thị thanh tiêu đề một chút nội dung. Tôi đặt chiều cao một cách rõ ràng khi tạo div. Nếu tôi đặt tùy chọn độ cao sau khi mở hộp thoại, chiều cao được sửa, nhưng nội dung sẽ trống (hiển thị phần trên cùng của hộp văn bản). Nếu tôi cho phép hộp thoại có thể thay đổi kích thước, nếu bạn thay đổi kích thước trong IE, nó hoạt động tốt, nhưng tôi không muốn ép người dùng IE thay đổi kích cỡ chỉ để xem nội dung. Bất kỳ ý tưởng? Đây là mã tôi sử dụng để tạo hộp thoại:Vấn đề đối thoại jQuery UI với IE

$('#dialogDiv').dialog({ 
    bgiframe: true, 
    height: 400, 
    width: 620, 
    modal: true, 
    draggable: true, 
    resizable: false, 
    close: function(event, ui) { 
     if($('#agree').val() != '1') 
      location.href = 'somepage.html'; 
    } 
}); 

Trả lời

0

Tôi đã trả lời câu hỏi của riêng mình. Tôi chỉ phải chơi với các thuộc tính chiều cao của hộp thoại và một số phần tử trong hộp thoại. Tốt gọi cho tôi!

+3

điều này không trả lời được câu hỏi. – CodingWithoutComments

+0

Tôi đã phải thay đổi kích thước một số hộp văn bản trong thẻ div đã hoạt động như hộp thoại của tôi và loại bỏ thuộc tính chiều cao trong mã jquery của tôi. Nếu các cá nhân khác có thể giải quyết vấn đề của họ dựa trên câu trả lời của riêng tôi, tôi nghĩ rằng nó KHÔNG trả lời câu hỏi. –

+3

Tôi có thể xác nhận rằng không chỉ định thuộc tính chiều cao trong đối tượng được chuyển đến hộp thoại ({...}) làm cho nó hoạt động trong IE. Tôi không biết tại sao. –

4

Tôi cũng gặp phải vấn đề tương tự. Có, bằng cách không chỉ định chiều cao, IE sẽ thay đổi kích thước hộp thoại và hiển thị nội dung của nó. Tuy nhiên, tôi không muốn hộp thoại phương thức tiếp tục phát triển khi nội dung lâu hơn. Lý tưởng là hiển thị hộp thoại với chiều cao được chỉ định và người dùng có thể xem nội dung bằng cách sử dụng thanh cuộn. Điều này hoạt động hoàn hảo trong FireFox. Có ai có một giải pháp cho IE?

30

Sau khi thực hiện một số tìm kiếm trên Google, tôi đã tìm thấy câu trả lời đúng cho câu hỏi. Nó được gây ra bởi một Doctype không tương thích. Vui lòng truy cập http://osdir.com/ml/jquery-ui/2009-08/msg00388.html để biết thêm thông tin.

Tôi đã thử trên mã của tôi và giải pháp trong URL này KHÔNG giải quyết được vấn đề.

+6

Đây là câu trả lời đúng cho vấn đề. Tôi đã có cùng một vấn đề và bao gồm DOCTYPE trong thực tế giải quyết một vài vấn đề về kiểu dáng với jQuery. –

+1

Cảm ơn bạn đã chia sẻ giải pháp, nó cũng đã làm việc với IE9. – will824

+2

Cảm ơn bạn rất nhiều. Điều này thực sự giải quyết vấn đề. IE sucks –

0

tôi đã có thể khắc phục điều này bằng cách đưa ra một đơn vị vào chiều cao như thế này:

$(id).dialog({ modal: true, height: h + "px", width: w }); 

Tôi không phải gây rối với các loại tài liệu được. Đây là trên IE8, jQuery 1.4.4 và jQuery UI 1.8.9.

--Để nhanh chóng đăng bài đăng này. Điều đó phá vỡ nó trong Firefox. Phớt lờ tôi!

19

Tôi đã gặp sự cố tương tự này trong IE7 và xem xét kỹ hơn các triệu chứng và giải pháp. Tôi nhận thấy rằng khi tôi tạo một hộp thoại giả không có nội dung thì chiều cao được hiển thị chính xác. Vì vậy, tôi bắt đầu chơi xung quanh với nhiều loại nội dung để xem liệu tôi có thể viết nội dung khác đi để khắc phục vấn đề không. Không may mắn. Tuy nhiên, những gì tôi phát hiện ra là càng có nhiều nội dung tôi thêm vào, thì hộp thoại càng ngắn trong IE7 (ngay cả các mục ẩn cũng rút ngắn nó một chút). Do đó, nội dung đơn giản có thể sẽ không có nhiều tác động đáng chú ý (và do đó, việc không có nhiều khiếu nại về vấn đề này). Bảng và nhiều mục biểu mẫu tôi đã thêm tạo ra một hiệu ứng rất đáng chú ý.

Đặt chiều cao thành tự động hoạt động tốt nhưng IE7 vẫn tính toán độ cao trên nội dung của tôi khoảng 10 pixel quá ngắn (có thể là chiều cao đệm trên đối tượng) và do đó jQuery thêm thanh cuộn. Không hoàn hảo, nhưng chấp nhận được những gì sau.

Không tìm được cách giải quyết khác, tôi bắt đầu xem xét giải pháp DOCTYPE. Tôi phát hiện ra rằng DOCTYPE của trang web của chúng tôi - mặc dù nó có vẻ chính xác - nó thực sự đặt tất cả các trình duyệt vào "Chế độ Quirks" và rằng đây là nguồn thực sự của vấn đề. Tôi nghi ngờ rằng jQuery hỗ trợ các vấn đề chế độ quirks vì vậy tôi nghi ngờ điều này sẽ bao giờ được cố định.

DOCTYPE của tôi hiện tại:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

gì nó nên là:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Thậm chí DOCTYPE già này làm việc:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">

Do đó, không phải DOCTYPE phải là giá trị HTML 5 của <!DOCTYPE html>, nó phải là DOCTYPE hợp lệ (HTML 4 hoặc 5 - không chắc chắn về XHTML) sẽ đặt IE7 thành một cái gì đó khác với chế độ quirks (Firefox hoạt động bình thường theo cả hai cách). Xem:

http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types

Tôi không có tùy chọn để thay đổi DOCTYPE trang web của chúng tôi vì vậy tôi phải sử dụng giải pháp khác như chiều cao tự động. Tôi nhận thấy có sự khác biệt giữa các chế độ quirks và chuẩn khi sử dụng Hộp thoại jQuery vì vậy tôi cũng phải xử lý chúng (cụ thể là tỷ lệ phần trăm kích thước phông chữ được tích lũy khác nhau trong cả IE7 và Firefox).

0

Tôi gặp vấn đề tương tự khi sử dụng kích thước phông chữ tính bằng pixel. kích thước phông chữ: 11px - cỡ chữ: 15px; trong css gây ra các vấn đề về chiều cao trong ie9. kích thước phông chữ: 16px; và hoạt động tốt trong ie9

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