相关疑难解决方法(0)

我有一个简单的网页,其中包含一些以页面为中心的Lipsum内容.该页面在Chrome和Firefox中运行良好.如果我缩小窗口的大小,内容将填充窗口,直到它不能,然后添加滚动条并将内容从屏幕填充到底部.

但是,该页面不在IE11中.我可以通过弯曲身体让页面在IE中居中,但是如果我这样做,那么内容开始从屏幕上移到顶部并切断内容的顶部.

以下是两种情况.查看相关的小提琴.如果问题不明显,请减小结果窗口的大小,以便强制生成滚动条.

注意:此应用程序仅针对最新版本的Firefox,Chrome和IE(IE11),它们都支持Flexbox的候选推荐标准,因此功能兼容性不应成为问题(理论上).

编辑:使用全屏API全屏显示外部div时,所有浏览器都使用原始CSS正确居中.但是,在离开全屏模式时,IE将恢复为水平居中和垂直顶部对齐.

编辑:IE11使用非供应商特定的Flexbox实现.灵活的框("Flexbox")布局更新

在Chrome/FF中正确调整中心和调整大小,在IE11中无法居中但正确调整大小

小提琴:http://jsfiddle.net/Dragonseer/3D6vw/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

无处不在的中心,在缩小时缩小顶部

小提琴:http://jsfiddle.net/Dragonseer/5CxAy/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
    display: flex;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: …