Sử dụng “margin: 0 auto;” trong Internet Explorer 8

Question 1

Tôi đang trong quá trình thực hiện một số thử nghiệm IE8 nâng cao và có vẻ như kỹ thuật sử dụng cũ margin: 0 auto;không hoạt động trong mọi trường hợp trong IE8.

Đoạn HTML sau cung cấp một nút căn giữa trong FF3, Opera, Safari, Chrome, IE7 và IE8, nhưng KHÔNG phải trong tiêu chuẩn IE8:

<div style="height: 500px; width: 500px; background-color: Yellow;">
    <input type="submit" style="display: block; margin: 0 auto;" />
</div>

(Để làm việc xung quanh, tôi có thể thêm chiều rộng rõ ràng cho nút).

Vì vậy, câu hỏi đặt ra là: những trình duyệt nào là đúng? Hay đây là một trong những trường hợp không xác định được hành vi?

(Suy nghĩ của tôi là tất cả các trình duyệt đều không chính xác - nút không phải là 100% chiều rộng nếu nó là "display: block"?)

CẬP NHẬT: Tôi là một thằng ngu. Vì đầu vào không phải là một phần tử cấp khối, tôi nên chỉ chứa nó trong một div có "text-align: center". Phải nói rằng, vì lý do tò mò, tôi vẫn muốn biết liệu nút nên hay không nên đặt chính giữa trong ví dụ trên.

CHO CẬU BÉ: Tôi biết tôi đang làm những điều kỳ lạ trong ví dụ và như tôi đã chỉ ra trong bản cập nhật, tôi nên căn chỉnh nó ở giữa. Đối với tiền thưởng, tôi muốn tham khảo các thông số kỹ thuật trả lời:

Nếu tôi đặt "display: block", nút có phải là chiều rộng 100% không? Hay điều này là không xác định?
Vì màn hình là khối, nên "margin: 0 auto;" giữa nút, hay không, hoặc không xác định?

Question 2

Đó là một lỗi trong IE8.

Bắt đầu với câu hỏi thứ hai của bạn: “margin: 0 auto” căn giữa một khối, nhưng chỉ khi chiều rộng của khối được đặt nhỏ hơn chiều rộng của khối chính. Thông thường, chúng sẽ giống nhau. Đó là lý do tại sao văn bản trong ví dụ dưới đây không được căn giữa.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

Khi kiểu hiển thị của phần tử b được đặt thành khối, chiều rộng của nó sẽ được mặc định là chiều rộng cha mẹ. Thông số CSS 10.3.3 Các phần tử cấp khối, không được thay thế trong luồng thông thường mô tả cách: “Nếu 'chiều rộng' được đặt thành 'tự động', bất kỳ giá trị 'tự động' nào khác trở thành '0' và 'chiều rộng' theo sau từ giá trị bằng . ” Sự bình đẳng được đề cập ở đó là

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = chiều rộng của khối chứa

Vì vậy, thông thường tất cả các ô tô đều dẫn đến chiều rộng khối bằng chiều rộng của khối chứa.

Tuy nhiên, cách tính này không nên áp dụng cho INPUT, là phần tử được thay thế. Các phần tử được thay thế được bao phủ bởi 10.3.4 Các phần tử được thay thế ở mức khối, trong dòng bình thường . Văn bản ở đó cho biết: “Giá trị đã sử dụng của 'width' được xác định như đối với các phần tử được thay thế nội tuyến." Phần liên quan của 10.3.2 Các phần tử được thay thế trong dòng là: “nếu 'width' có giá trị được tính là 'auto' và phần tử có chiều rộng nội tại, thì chiều rộng nội tại đó là giá trị được sử dụng của 'width'”.

Tôi đoán rằng kịch bản mà CSS quan tâm là phần tử IMG. Biểu trưng Stackoverflow trong ví dụ này sẽ được căn giữa bởi tất cả các trình duyệt.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt="">
</div>

Phần tử INPUT phải hoạt động theo cùng một cách.

Question 3

Thêm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">giải quyết vấn đề

Question 4

Có, bạn có thể đọc thông số kỹ thuật hàng trăm lần và kết hợp các bit và phần khác nhau cho đến khi bạn có cách diễn giải cảm thấy đúng - nhưng đó chính xác là những gì các nhà cung cấp trình duyệt đã làm và đó là lý do tại sao chúng ta đang ở trong tình trạng như ngày nay.

Về bản chất, khi bạn áp dụng chiều rộng 100% cho một phần tử, nó sẽ mở rộng đến 100% chiều rộng của phần tử gốc, nếu phần tử đó là một phần tử khối. Bạn không thể căn giữa nó nữa margin: 0 auto;vì nó đã chiếm 100% chiều rộng có sẵn.

Để căn giữa bất cứ thứ gì với margin: 0 auto;bạn, bạn cần xác định một chiều rộng rõ ràng. Để căn giữa một phần tử nội dòng, bạn có thể sử dụng text-align: center;trên phần tử cha, mặc dù điều này có thể có tác dụng phụ không mong muốn nếu phần tử cha có con khác.

Question 5

Các điều khiển biểu mẫu là các phần tử được thay thế trong CSS.

10.3.4 Các phần tử cấp khối, được thay thế trong dòng bình thường

Giá trị được sử dụng của 'width' được xác định như đối với các phần tử được thay thế nội tuyến . Sau đó, các quy tắc cho các phần tử cấp khối không được thay thế được áp dụng để xác định lợi nhuận.

Vì vậy, điều khiển biểu mẫu không nên được kéo dài đến 100% chiều rộng.

Tuy nhiên, nó nên được tập trung. Nó trông giống như một lỗi thông thường trong IE8. Nó căn giữa phần tử nếu bạn đặt chiều rộng cụ thể:

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />

Question 6

Theo giải thích của buti-oxa, đây là một lỗi trong cách IE8 xử lý các phần tử bị thay thế. Nếu bạn không muốn thêm chiều rộng rõ ràng vào nút của mình thì bạn có thể thay đổi nó thành một khối nội tuyến và căn giữa các nội dung:

<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;">
  <input type="submit" style="display: inline-block;" />
</div>

Nếu bạn muốn điều này hoạt động trong các phiên bản Mozilla cũ hơn (bao gồm cả FF2) không hỗ trợ khối nội tuyến thì bạn có thể thêm display: -moz-inline-stack;vào nút.

Question 7

Theo như đây là một "lỗi" liên quan đến thông số kỹ thuật; nó không phải. Như tác giả của bài đăng câu hỏi, hành vi cho điều này sẽ là "không xác định" vì hành vi này trong IE chỉ xảy ra trên các điều khiển biểu mẫu, theo thông số kỹ thuật:

CSS 2.1 không xác định thuộc tính nào áp dụng cho điều khiển biểu mẫu và khung, hoặc cách CSS có thể được sử dụng để tạo kiểu cho chúng. Tác nhân người dùng có thể áp dụng các thuộc tính CSS cho các phần tử này. Các tác giả nên coi hỗ trợ như vậy là thử nghiệm.

( http://www.w3.org/TR/CSS21/conform.html#conformance )

Chúc mừng!

Question 8

Một lần nữa: tất cả chúng ta đều ghét IE!

<div style="width:100%;background-color:blue;">
    <div style="margin:0 auto;width:300px;background-color:red;">
        Not Working
    </div>
</div>

<div style="width:100%;background-color:green;text-align:center;">
    <div style="margin:0 auto;width:300px;background-color:orange;text-align:left;">
        Working, but dumb that you have to use text-align
    </div>
</div>

Question 9

đã thử tất cả những điều trên, cuối cùng làm được điều này

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>

Question 10

Thêm <!doctype html>ở đầu đầu ra HTML của bạn.

Question 11

nút không được có chiều rộng 100% nếu đó là "display: block"

Không. Điều đó chỉ có nghĩa là nó là thứ duy nhất trong không gian theo chiều dọc (giả sử bạn không sử dụng một thủ thuật khác để ép một thứ khác ở đó). Nó không có nghĩa là nó phải lấp đầy chiều rộng của không gian đó.

Tôi nghĩ rằng vấn đề của bạn trong trường hợp này inputlà nguyên bản không phải là một phần tử khối. Hãy thử lồng nó vào bên trong một div khác và đặt lề trên đó. Nhưng tôi không có trình duyệt IE8 để kiểm tra điều này vào lúc này, vì vậy đó chỉ là phỏng đoán.

Question 12

"margin: 0 auto" chỉ căn giữa một phần tử trong IE nếu phần tử mẹ có "text-align: center".

Question 13

Giả sử margin: 0 autokhi đó phần tử phải được căn giữa, nhưng chiều rộng được giữ nguyên - bất kể nó được tính là gì, bỏ qua bất kỳ cài đặt lề nào.
Nếu bạn đặt <INPUT>thẻ thành display:block, thì thẻ phải được căn giữa với margin: 0 auto.

Xem chi tiết mô hình định dạng trực quan - tính toán chiều rộng và lề từ thông số kỹ thuật CSS 2.1 để biết thêm chi tiết. Các bit Relavent bao gồm:

Trong ngữ cảnh định dạng khối, cạnh ngoài bên trái của mỗi hộp chạm vào cạnh trái của khối chứa.

và

Khi tổng chiều rộng của các hộp nội tuyến trên một dòng nhỏ hơn chiều rộng của hộp dòng chứa chúng, phân phối theo chiều ngang của chúng trong hộp dòng được xác định bởi thuộc tính 'text-align'.

cuối cùng

Nếu 'chiều rộng' được đặt thành 'tự động', mọi giá trị 'tự động' khác sẽ trở thành '0' và 'chiều rộng' theo sau từ đẳng thức kết quả.

Nếu cả 'margin-left' và 'margin-right' đều là 'auto', các giá trị được sử dụng của chúng bằng nhau. Điều này làm căn giữa phần tử theo chiều ngang đối với các cạnh của khối chứa.