I'm trying to set the width of a <main>
element with CSS. Just using
main {
width:200px;
}
works fine in all browsers except Internet Explorer (Edge does work).
Take a look at this example: JSfiddle
The result in IE11:
The result in Chrome:
The HTML5 main
element is not supported by Internet Explorer ( see browser support data ).
You'll need to define main
as a block-level element for width
to work.
Make this adjustment:
main {
display: block; /* new */
width: 200px;
}
Because the main
element is not recognized by Internet Explorer – meaning it's not defined in IE's default style sheet – it uses CSS initial values ( per the spec ).
The initial value of the display
property is inline
.
The width
property is ignored by inline elements. From the spec:
10.3.1 Inline, non-replaced elements
The
width
property does not apply.
By defining the main
element as a block-level element in author styles, the width
property will work.
More details:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.