CSS - Mozilla bug? box-shadow:inset not working properly

后端未结

关注

 3  1007

Basically the below code should simply be a white page with a shadow around the edge. This works fine in Chrome but I can\'t seem to get it to work in Firefox!

相关标签:

3条回答

暖寄归人

2021-01-12 10:36
So the answer marked as correct CSS - Mozilla bug? box-shadow:inset not working properly does not work for me. Why? Because the example includes no content. When you style the <body> and <html> elements with height: 100% it creates a strange bug where the 100% is technically registering as 100% of the viewport rather than 100% of the window height.

This is a great example of how to do this properly: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html. Styling the body and html elements at height: 100% is correct, however, your inner-shadow needs to be attached to another element (can't be body or html) and then min-height: 100% as well as box-shadow: 0 0 100px #000 attached to the shim, e.g.
```
html, body { height: 100% }
#styled-div { 
   min-height: 100%;
   box-shadow: 0 0 100px #000;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
野性不改

2021-01-12 10:48
Firefox shows you the right thing because right now body has no height. So you have to define the height of your body.

Write this in your CSS:
```
html, body {
    height: 100%
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
别那么骄傲

2021-01-12 10:56
Add this:
```
html, body {
    height: 100%
}
```
http://jsbin.com/oyuzug

There is nothing in body, so it has no height.

The only reason it worked without this in Chrome is because you did not include a doctype as the very first line to enable Standards Mode.

Test these in Chrome:

Your original code: http://jsbin.com/urimah

Your original code with doctype: http://jsbin.com/urimah/2

Conclusion: Always include a doctype as the very first line to avoid Quirks Mode and the inconsistencies it brings between different browsers.
0 讨论(0)
发布评论:

提交评论
- 加载中...