Với thiết kế của chúng tôi, chúng tôi cần nhiều cột để hiển thị tiêu đề với dấu chấm lửng mà tôi không mong đợi là một vấn đề lớn nhưng khi chúng được lồng vào bên trong một số display: table, các tính toán dường như không chính xác.Tại sao thay đổi tính toán chiều rộng không quấn khi nó được lồng vào bên trong của một phần tử có hiển thị bảng?
Cần lưu ý rằng chúng tôi muốn có bố cục đáp ứng để có độ rộng phần trăm (độ rộng cố định sẽ giải quyết được sự cố). Và bố cục của chúng tôi yêu cầu thêm display: table nhiều cây và tôi không thể loại bỏ nó mà không có trình tái cấu trúc chính.
Nếu bạn loại bỏ màn hình hiển thị mọi thứ hoạt động như tôi mong chờ:
Nhưng có màn hình gây ra phụ huynh để đưa vào tài khoản các yếu tố con tổng chiều rộng trước cắt ngắn (nhưng với nowrap đưa vào tài khoản). Nó giống như việc dựng hình ban đầu xảy ra mà không có một tràn được xác định và thêm nó sau khi thực tế (nhưng do đó, tính toán chiều rộng là quá lớn).
tôi có thể đoán tại sao rendering là vi phạm nhưng tôi muốn một câu trả lời dứt khoát hơn về cách thức trình duyệt render này ... (Tested trong Chrome/FF/Safari trên Mac)
Đây là một chút lộn xộn, bạn đang lồng phần tử khối (ul) bên trong phần tử nội tuyến (span) và sử dụng bảng hiển thị trực tiếp bên trong ô hiển thị nội dung nào đó (không chuẩn, vì vậy việc hiển thị trình duyệt cuối cùng trở nên không thể đoán trước) sử dụng bảng-hàng ... Bạn có thể giải thích những gì bạn thực sự cần? – coma
Ví dụ trên không liên quan đến mã của tôi; Tôi chỉ sử dụng một loạt các yếu tố để chứng minh hành vi mà tôi đang nhìn thấy (thay vì xác định một bàn tay đầy đủ các lớp). 'display: table' được thêm vào ban đầu vì vậy nhiều cột sẽ kết thúc có cùng chiều cao động (không có js). Dù sao những gì tôi muốn là để hiểu được lý do tại sao chúng tôi có hành vi này xung quanh nowrap (Tôi không tìm kiếm một "làm thế nào để làm cho html trông giống như màn hình của tôi-shot", tôi có thể làm điều đó). Ngoài ra tôi sẽ không mong đợi bảng hàng để có hiệu lực ví dụ của tôi bởi vì tôi không nghĩ rằng nó sẽ có hiệu lực tính toán chiều rộng (nhưng nó là một chút cẩu thả để lại). – SciSpear
Nó hoạt động giống nhau trong tất cả các trình duyệt, vì vậy tôi nghĩ rằng đó là một hành vi có thể dự đoán được (và một mẫu dự kiến). Tôi đoán là tôi chỉ không biết đủ về các chu kỳ sơn/bố trí cấp thấp hơn của trình duyệt để hiểu kết quả. – SciSpear