Cách ẩn nền bên dưới đường viền

Question

Tôi cần phải sửa đổi trang web để làm cho vùng có thể nhấp của tất cả các liên kết lớn hơn cho thiết bị di động. Tôi đã cung cấp tất cả các liên kết trong suốt border và margin phủ định có cùng kích thước, để không ảnh hưởng đến luồng văn bản. Bây giờ điều này hoạt động như một say mê. Nhưng không phải trên các yếu tố có nền. Nền trải ra biên giới trong suốt. Đây là các đường nối hành vi nhất quán giữa tất cả các trình duyệt.

http://jsfiddle.net/hq65C/1/ đây một ví dụ khác: http://jsfiddle.net/DytDA/

Tại sao điều này? Tôi luôn nghĩ rằng biên giới nằm ngoài phần tử. Làm thế nào tôi có thể sửa lỗi này. (Tôi cần một giải pháp không yêu cầu sửa đổi HTML).

Answer 1

Làm thế nào về background-clip: padding-box;?

Demo

Answer 2

tôi nghĩ rằng nếu biên giới là ngoài yếu tố, hành vi mà bạn đang ở phía sau (đó nhấp vào biên giới cư xử như cách nhấn vào bên trong phần tử) sẽ không làm việc, hoặc

nếu background-image không phải là lặp đi lặp lại , bạn có thể đặt vị trí x vị trí nền thành cùng một mức mà chiều rộng đường viền của bạn. nếu không, bạn cũng có thể thử đặt màu đường viền thành giống như màu phía sau phần tử, nhưng nếu đó là hình ảnh, chúc may mắn

Answer 3

CSS background điền vào khu vực của border, với border-color phân lớp.

Khi bạn có một minh bạch border, nó đang hiển thị background-color đằng sau nó.

Với HTML/CSS đơn giản, tôi không chắc chắn có cách nào xung quanh vấn đề này.

jsFiddle này demostrates này:

http://jsfiddle.net/hq65C/8/

Answer 4

thử điều này:

<a href="#"><span style="background: red">link</span></a> test test test <br/> 
test test test 

thông báo: span nghĩa một phần tử nội tuyến với phong cách khác (giá trị CSS khác). khác mà div mà sẽ buộc một khối mới.