CSS chỉ áp dụng cho Chrome?

Question

Đây là trang web của tôi: http://portable-ebook-reader.net

Thanh tìm kiếm ở trên cùng được tạo thành từ hai hình nền. Một là cho nơi bạn nhập vào cụm từ tìm kiếm, thứ hai là nút thực để tìm kiếm.

Vấn đề của tôi là trong Chrome, hình ảnh nút tìm kiếm quá cao 2px. Nhưng nó trông hoàn hảo trong IE và FF. Và nếu tôi sửa đổi CSS (margin-top: 2px) thì Chrome có vẻ tốt nhưng IE và FF bị rối tung lên.

Bất kỳ ý tưởng nào? Tôi đã tìm kiếm hàng giờ mà không có may mắn.

Cảm ơn!

Answer 1

Làm cho nó trông phù hợp với FF trước. Sau đó, làm cho nó tìm kiếm phù hợp cho cả FF và Chrome. Chỉ sau khi bạn có nó tìm kiếm ngay trong FF và Chrome, bạn nên bắt đầu liên quan đến chính mình với nó trông như thế nào trong IE. Sau khi bạn đạt được điều này, sau đó bắt đầu điều chỉnh cho IE, nếu cần, sử dụng * trước quy tắc kiểu của bạn, ví dụ: *margin-top:2px; điều chỉnh lề trên cho IE7 và IE6 độc quyền.

Sau khi xem mã của bạn, thật khó để nói chính xác điều gì có thể gây ra sự cố mà không thể kiểm tra các giải pháp khác nhau trên hệ thống của tôi. Nhưng đây là một số điều bạn có thể cố gắng thay đổi trong file styles.css của bạn (nằm trong thư mục 'Chronicle' của bạn trong thư mục 'chủ đề' của bạn) có thể sửa vấn đề:

• áp dụng giá trị cùng một chiều cao cho cả hai bạn #s và #searchsubmit quy tắc bộ
• loại bỏ font: 14px "century gothic", Arial, Helvetica, sans-serif; từ #searchsubmit
• sau khi bạn làm các việc trên, nếu nó vẫn không giống ngay cả FF và Chrome, thiết lập các giá trị đệm đầu tiên và thứ hai cho #s quy tắc thiết lập của bạn đến 0 (tức là thay đổi 8px thành 0px) và sau đó thêm margin-top: khai cho cả #s và #searchsubmit và cung cấp cho cả hai cùng giá trị, ví dụ margin-top:8px;
• nếu bạn vẫn gặp vấn đề, hãy thử copy dòng này: font: normal 100% "Tahoma", Arial, Helvetica, sans-serif; từ #s bạn quy tắc thiết lập và thêm nó vào #searchsubmit bạn quy tắc thiết lập để nó xuất hiện trong cả hai bộ quy tắc.

Có rất nhiều khả năng khác nhau có thể gây ra sự cố, đó là lý do tại sao bạn có thể thử một trong các lỗi kể trên nếu bạn không thể tìm ra nguồn gốc của sự cố.

Answer 2

Bạn có thể kiểm tra xem liệu navigator.appVersion có chứa từ "Chrome" không và đặt vị trí tương đối của nút đó xuống một vài pixel qua javascript.

if (navigator.appVersion.indexOf("Chrome/") != -1) { 
// modify button 
} 

Answer 3

Hãy thử thay đổi loại tài liệu của bạn thành nghiêm ngặt - mọi thứ hoạt động trong một tài liệu chủ yếu hoạt động giống nhau trong cả ba trình duyệt chính. Chủ yếu là.

Answer 4

Giống như tham chiếu, a list of all possible browser specific CSS hacks. Mặc dù tôi không khuyến khích sử dụng những hacks đó, nó có thể phù hợp với một sửa chữa nhanh chóng cho vấn đề của bạn.

Answer 5

Có một cái nhìn tại http://rafael.adm.br/css_browser_selector/

nhỏ tập tin js có thêm các lớp vào thẻ cơ thể của bạn như .webkit, .chrome vv mà bạn do đó có thể sử dụng trong stylesheet của bạn.

Answer 6

Để sử dụng CSS mà sẽ chỉ áp dụng đối với các trình duyệt Webkit (Chrome và Safari):

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #searchsubmit { height: 20px; } 
    #s { margin-top: 5px; } 
} 

Một hack xấu xí nhưng nó có thể làm việc cho những vấn đề vẽ bực bội.

Answer 7

Tôi đã tìm thấy mẹo này một vài tuần trước và có vẻ như hoạt động giống nhau trong tất cả các trình duyệt.

Tạo một hình ảnh đơn chứa cả thanh tìm kiếm và nút tìm kiếm của bạn. Biến nó thành nền của biểu mẫu của bạn thông qua tạo kiểu CSS. Sau đó điều chỉnh cả đầu vào văn bản và nút gửi (có thể thông qua các lớp hoặc ID) để có {border: 0; background: transparent} và sau đó chỉ cần điều chỉnh chiều cao và chiều rộng của các phần tử biểu mẫu để phù hợp với bố cục của nền biểu mẫu của bạn. Trước đây tôi đã sử dụng < loại đầu vào = "hình ảnh" .../> nhưng không bao giờ có thể có được sự căn chỉnh hoàn toàn đúng cho dù tôi đã tạo kiểu hoặc đệm nó như thế nào. Phương pháp này hoạt động tốt ngay sau khi bạn điều chỉnh lề, phần đệm và định vị tuyệt đối của phần tử biểu mẫu nếu cần (bạn có thể muốn để các đường viền hiển thị trong quá trình thử nghiệm để bạn có thể đặt nó đúng cách).

Tôi cũng thấy thuận tiện khi đặt con trỏ {cursor: pointer;} vào nút gửi tìm kiếm của tôi và đôi khi thậm chí các hình thức nhập khác để đưa ra một đầu mối trực quan rằng đây là biểu mẫu không thể gửi được và mọi người được khuyến khích nhấp vào.