2012-12-09 32 views
9

Trong cả Safari và Chrome, thuộc tính placeholder dường như thêm chiều rộng vô hình, làm cho thanh cuộn ngang và hiển thị giống như nhấp nháy khi cửa sổ được định kích thước theo chiều ngang.Văn bản Trình giữ chỗ HTML5 Thêm Chiều rộng Trong Safari Gây Thanh cuộn và Nhấp nháy

overflow: hidden; có thể được áp dụng cho phần tử gốc để hạn chế vấn đề. Tuy nhiên, nó sẽ ghi lại các hiệu ứng lấy nét trường biểu mẫu của tôi.

Có cách nào để sử dụng một số giá trị tiền tố của nhà cung cấp nhất định để ngăn chặn điều này chẳng hạn như ::-webkit-input-placeholder {} hoặc một số cách khác không?

Khi thuộc tính được thêm vào đầu vào biểu mẫu, thanh cuộn ngang sẽ nhấp nháy khi được định kích thước theo chiều ngang trên trình duyệt webkit. Cụ thể, phong cách nào đang kích hoạt hành vi này? Và làm cách nào để ngăn chặn hoặc ghi đè hành vi này !?

+0

Có tình yêu nào không? Tôi đoán là chủ nhật. Cấp được khá nhiều phong cách thừa hưởng như tôi đang sử dụng một hệ thống lưới điện, nhưng nếu có ai có thể chỉ cho tôi đi đúng hướng bằng cách sử dụng FireBug hoặc bất kỳ lời khuyên nào khác sẽ được nhiều người đánh giá cao! –

+0

Tôi đang sử dụng phiên bản Chrome mới nhất và chưa trải qua nhấp nháy? Bạn có cơ hội sử dụng và chuyển tiếp CSS3 hoặc hoạt ảnh? – Ben

+0

Không, tôi đã loại bỏ tất cả CSS ngoại trừ đầu vào [type = "text"] {width: 100%; }. Tôi đã thử nghiệm liên kết tôi đã cung cấp ở trên trên tất cả các trình duyệt chính cả PC và Mac OSX. Điều này thường có thể không phải là một vấn đề lớn, nhưng tôi đang làm việc trên một thiết kế đáp ứng và khung nhìn di động về cơ bản có thể trở thành "rèm" với hệ thống lưới điện của tôi. –

Trả lời

0

Nhiều yếu tố đầu vào có đệm mặc định. Khi bạn nêu rõ trạng thái width: 100%, nó làm cho phần tử có chiều rộng là 100% + đệm. Để ngăn đệm tăng chiều rộng, chỉ cần sử dụng box-sizing: border-box;

+0

Vâng, tôi cũng bắt đầu thay đổi mô hình hộp cho các yếu tố sau khi đọc một bài báo của Paul Irish. Tôi không áp dụng cho tất cả các yếu tố như đề cập đến bài viết te nhưng sử dụng một bộ chọn như thế nào.biểu mẫu> * {-moz-box-sizing: border-box; -webkit-box-sizing: hộp biên giới; box-sizing: border-box;} có vẻ ổn. Có lẽ không phải là bộ chọn hiệu suất nhất, nhưng giải pháp tốt nhất mà tôi đã gặp! http://www.paulirish.com/2012/box-sizing-border-box-ftw/ –

0

Tôi đã xem trang web của bạn trong Chrome và Safari, nhưng dường như không có vấn đề bạn đã đề cập. Tuy nhiên, hình ảnh trên cùng của bạn đang tràn lên đầu bởi vì bạn đã đặt tràn để ẩn và bạn không đặt lề trên cho tiêu đề của mình. Vì vậy, tôi đã tiếp tục và tạo lề đó:

#header img { 
    margin-top: 50px; 
} 

và cách đó giải quyết được sự cố. Tôi ước tôi có thể đăng hình ảnh.

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