2013-09-30 18 views
7

Tôi đang gặp lỗi lạ trong các trình duyệt trong iOS7, nơi các đường màu đen xuất hiện xung quanh các phần tử div. Nhưng khi bạn phóng to một phần tử, các dòng này sẽ biến mất. Có ai có ý tưởng gì gây ra lỗi lạ này? Trong iOS6 không có dòng nào xuất hiện. Điều này đang xảy ra trên url này: http://www.tristanfrencken.com/ios 7 viền đen của trình duyệt-kit xung quanh các phần tử div

Hy vọng rằng ai đó có thể giúp tôi với điều này!

+0

Bạn có thể cho một số chi tiết như những gì phong cách biên giới sử dụng của bạn, vv? Ngoài ra, có thể bao gồm một ảnh chụp màn hình hoặc hai? – neelsg

+0

Tôi đã cố gắng thêm ảnh chụp màn hình nhưng tôi chưa được phép đăng ảnh. Vấn đề dường như nằm trong plugin Isotop jquery tôi đang sử dụng. Tôi đã thay đổi nó thành plugin xây và bây giờ biên giới đã biến mất. Vẫn có một đường viền hiển thị ở cuối tiêu đề có vị trí: cố định. Vì vậy, tôi nghĩ rằng nó có cái gì đó để làm với vị trí này. Tôi không có bất kỳ kiểu viền nào trong CSS của tôi cho các phần tử này. – Kneep

Trả lời

4

Kỳ lạ, điều này dường như được kích hoạt khi một phần tử được cố định VÀ có màu nền, nhưng chỉ trong IOS7 và không nếu nó có hình nền. Tôi sẽ viết nó như một lỗi trong trình duyệt, nhưng như một giải pháp cho bây giờ bạn có thể sử dụng một hình ảnh màu trắng rắn, lát gạch, làm nền tiêu đề của bạn.

+0

bởi cố định bạn có nghĩa là vị trí: tuyệt đối? – kuba

+0

Không, ý tôi là vị trí: cố định – Greg

+0

hmmm, tôi đã xóa tất cả các thành phần có vị trí: đã khắc phục và vẫn gặp sự cố này, bạn có thêm mẹo nào không? :) – kuba

0

Điều này có vẻ là một lỗi trong iOS7 cũng như trong Safari mới nhất trên OSX Maverick. Các phần tử chồng chéo với màu nền dường như “làm dày” các đường viền của chúng khiến cho hành vi kỳ lạ này. Tôi đang tuyệt vọng tìm kiếm một giải pháp cho việc này.

tôi bắt đầu một chủ đề mới về nó ở đây iOS7/Mavericks Safari strange element border behaviour

0

này đã xảy ra với tôi và nó đã làm với các thẻ meta cho phép zoom

Rõ ràng iOS Safari có một vấn đề với những thứ thay đổi kích thước và tạo ra mà vật

Áp dụng một thẻ meta để vô hiệu hóa zoom giải quyết vấn đề của tôi (do người dùng khả năng mở rộng = no)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
+1

Điều này không thực sự giải quyết được vấn đề, đặc biệt là nếu bạn muốn trang của bạn có thể thu phóng được ... – Greg

3

Chúng tôi HADE cùng một vấn đề trong ứng dụng web của chúng tôi, nơi chứa div-yếu tố với màu nền và vị trí cố định sẽ nhận được viền đen ở giá trị zoom khác nhau trong iOS 7.

giải pháp đầu tiên của chúng tôi liên quan đến chuyển đổi màu nền sang base64 url hoạt động khá tốt nhưng không đủ linh hoạt.

Thay vào đó, chúng tôi đã loại bỏ các viền đen bằng cách áp dụng border-radius: 1px; cho các phần tử vùng chứa đã xóa tất cả các đường viền đen. Giá trị đủ thấp để không hiển thị.

+0

lạ lùng bán kính đường viền hoạt động –

0

Sử dụng "background-image" bất động sản với các giá trị cùng một gradient:

background-image: -webkit-linear-gradient(top, #your_color, #your_color); 
Các vấn đề liên quan