đường ngang Mysterious trên trang web của tôi khi render trên iPad

Question

Trang web sau:

http://staging.jungledragon.com

Có một vài sự cố hiển thị trên iPad sử dụng Safari, vì vậy tôi đang cố gắng để khắc phục chúng. Có một vấn đề mà tôi đang mắc kẹt mặc dù. Nếu bạn có iPad, hãy mở trang web ở chế độ dọc. Có hai đường ngang không mong muốn xuất hiện, một đường ngang vượt qua các tab (Phổ biến, Tươi, vv) và một dòng dưới cùng nằm ngay phía trên hình minh họa thằn lằn. Cả hai dòng không nên ở đó.

Những dòng này không xuất hiện trên bất kỳ trình duyệt nào khác được thử nghiệm, bao gồm Safari trên Windows. Khi bạn di chuyển cùng một trang đó vào chế độ nằm ngang trên iPad, đường ngang hàng đầu sẽ biến mất, trong khi ở phía dưới vẫn nằm. Nếu bạn phóng to một chút vào dòng dưới cùng, nó sau đó sẽ biến mất.

Tôi đã thử nhiều bản sửa lỗi CSS khác nhau và bây giờ bắt đầu nghĩ đây là vấn đề hiển thị của Safari, mặc dù có thể do tôi kích hoạt.

Bất kỳ trợ giúp nào được đánh giá cao. Nó có vẻ như là một vấn đề nhỏ nhưng tôi ghét sự cẩu thả.

Answer 1

Rất tiếc - làm thế nào điều đó xảy ra?

meta để đi trong thẻ đầu để ngăn chặn phóng to trên iPad:

<meta name="viewport" content="initial-scale=1, maximum-scale=1"> 

Answer 2

Bạn đã thử đặt lại css chưa? Nếu không thử thêm một, nó có thể là một cái gì đó tiêu chuẩn cho các thiết bị di động để xem nếu nó vẫn tồn tại nếu nó kiểm tra nó ra trong firebug để xem chính xác những gì nó là

Answer 3

Vấn đề phải làm với cách Mobile Safari xử lý hình nền . Dòng màu xanh lá cây bật lên (ngay bên trong vùng nội dung của bạn) là từ một phần tử khác.

Thử 'định kích thước quá' hình ảnh của bạn. Ví dụ: Hình ảnh bị cắt ở độ cao 100 pixel, làm cho hình ảnh đó cao 110 pixel. Điều này làm việc cho tôi ... hầu hết thời gian.

Chỉnh sửa: Tôi đã kiểm tra trang web trên iPad của mình và tôi chỉ thấy rằng một dòng xuất hiện. Cũng lưu ý rằng nó biến mất khi bạn phóng to/thu nhỏ cho tôi biết đó là lỗi kết xuất (không phải thứ gì đó trong css của bạn).

Answer 4

Cách khác là chỉ định kích thước nền. Điều này có thể được thực hiện với bộ chọn css "background-size".

Nếu hình nền của bạn là cao 40 pixel, đoạn code sau sẽ ngăn chặn đường ngang từ hiển thị trên iPad: {background-size: 100% 40px}

Answer 5

Bạn có thể sửa rất nhiều những "khoảng trống iPad "vấn đề bằng cách tắt hoàn toàn phóng to trên iPad, bằng cách sử dụng thẻ meta này, a la Facebook:

<meta name="viewport" content="initial-scale=1, maximum-scale=1"> 

Điều này ngăn cản phóng to trên iPad, nhưng nó đã cố định tất cả của tôi 'div khoảng trống' vấn đề hoàn toàn.

Answer 6

Over-sizing hình ảnh nền của bạn bằng tay hoặc sử dụng CSS3 nên hầu như luôn luôn làm việc, như Damien và namsral chỉ ra.

Tuy nhiên, đôi khi điều này sẽ không giải quyết được sự cố trong trường hợp hình nền của bạn được neo tại một vị trí nhất định.Ví dụ: nếu hình nền của bạn được neo vào cuối div của bạn và dòng xuất hiện ở cuối div này, thì bạn nên thay đổi hình nền thấp hơn [dưới cùng] theo một số tiền nhất định, tùy thuộc vào chiều cao của div của bạn. Ví dụ:

hậu cảnh: trung tâm 100,1%;

Answer 7

Hình nền tôi đang sử dụng dừng giữa chừng div nội dung và sau đó nền của phần tử vùng chứa được cho là hiển thị.

Do iPad phóng to vào div ngoài cùng, nền liên quan được áp dụng cho thẻ html không được hiển thị. Dường như iPad không thích nó khi một màu nền dự phòng không được định nghĩa, vì vậy tôi đã phải thêm một số CSS iPad-cụ thể sử dụng một truy vấn phương tiện truyền thông:

html { background:#ffffff url("images/bg-html.png") center top repeat-x; } 
html#inside-html { background:#ffffff url("images/inside-bg-html.png") center top repeat-x; } 

body { 
    background:transparent url("images/bg-body.jpg") center top no-repeat; 
    text-align:center; 
    font:12px Helvetica, Arial, Verdana, sans-serif; 
    line-height: 20px; 
    color:#000; 
    min-width: 980px; 
} 

body#inside { background: transparent url("images/inside-bg-body.jpg") center top no-repeat; } 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
    body { 
     background: #fff url("images/bg-body.jpg") center top no-repeat; 
    } 

    body#inside { 
     background: #fff url("images/inside-bg-body.jpg") center top no-repeat; 
    } 
} 

Answer 8

cổ vũ, tôi đã giống nhau nhưng trên Andriods và sử dụng hình nền: 100% 460px; đã giúp giải quyết mỏ của tôi :)

Answer 9

Có một khoảng hoặc div không có bất kỳ nội dung nào trong đó.

Vui lòng cung cấp số disply:none; cho số div hoặc khoảng thời gian này và xem kết quả.