Có thể sử dụng phần tử giả (sau:, sau: trước) trên hàng của bảng một cách an toàn không?

Question

Tôi muốn thêm phần tử được định vị hoàn toàn dưới dạng :after (của :before) của hàng trong bảng.

Nhìn này http://jsbin.com/IGumoye/5/edit

tôi cho rằng khi tôi thêm yếu tố như rendering engine (ít nhất là Webkit dựa) nghĩ rằng đó là một ô trong bảng của một số loại.

:before hoạt động kém trong tất cả các trình duyệt. Nhưng: sau khi hoạt động rất tốt trong Firefox và gần như tốt trong webkit. Trong webkit nó giữ không gian nhỏ và làm cho toàn bộ chiều rộng bảng lớn hơn.

- Đây là những gì làm phiền tôi trong webkit.

Cách sửa lỗi này? Và tôi có thể đọc về lý do tại sao nó xảy ra?

CẬP NHẬT 1

giải pháp có thể: Sử dụng ô trong bảng đầu tiên trong dòng này như một máy chủ cho các phần tử hoàn toàn vị trí.

http://jsbin.com/IGumoye/10/edit

UPDATE 2

Ok, tôi nghĩ rằng tôi đã tìm thấy giải pháp cho vấn đề ban đầu của tôi. Và tôi cho rằng có thể tốt hơn. Nhưng tôi muốn sử dụng CSS tối đa. Vấn đề là - làm cho một số văn bản tĩnh có thể chỉnh sửa và nếu người dùng nhấp vào bất kỳ nơi nào khác - hãy đóng chế độ chỉnh sửa này.

http://jsbin.com/IGumoye/23/edit

Answer 1

Trong ví dụ này, bạn đang sử dụng ::after và ::before giả yếu tố để thêm nội dung sau hoặc trước một dòng của bảng, trong đó chủ yếu sẽ phá vỡ bố trí bảng và dẫn đến kết quả không thể đoán trước.

Nếu bạn thêm nội dung được tạo vào ô bảng, kết quả sẽ nhất quán hơn.

Không có nhiều để chỉ ngoại trừ thông số kỹ thuật ban đầu cho nội dung được tạo ra:

http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content

Bên cạnh đó, hãy nhớ rằng các công cụ CSS render tạo hộp giấu tên khi tạo bảng:

http://www.w3.org/TR/2009/CR-CSS2-20090908/tables.html#anonymous-boxes

Tuy nhiên, vì nội dung được tạo không phải là một phần của DOM, toàn bộ quá trình hiển thị bảng có thể không thể xử lý phần tử giả thừa trong một cách hợp lý.

Bạn đang đi sâu vào một khu vực không được chỉ định rõ ràng và mọi hỗ trợ sẽ là trình duyệt cụ thể.

Tùy thuộc vào yêu cầu bố cục của bạn, bạn có thể cần sử dụng JavaScript hoặc jQuery để thay đổi DOM của bảng thành hiệu ứng mong muốn.