html - 如何解决跨境高度和边距问题

标签 html css

我如何通过以下简单的 css 解决跨浏览器中的高度和边距问题。在 Internet Explorer 和 Firefox 中,div 元素的高度大于根据屏幕尺寸指定的高度,页眉与其他 div 元素或页脚与其他元素之间的边距也不均匀。 **或我更深入了解解决方案的任何网站引用表格**。提前致谢

 @media screen and (max-width: 480px) 
{

  html ,body  
{
width : 100% ;
height :100% ;
font-size : 1rem ;
}

.header ,.footer
{
display : table-row;
background : white ;
height : 10% ;
width : 100% ;
overflow : auto ;
} 
.left
{
display : table-row;
background : red ;
height : 26.66666666666667%;
width : 100% ;
overflow : auto;

}
 .center
{
display : table-row;
background :blue ;
height : 26.66666666666667%;
width : 100% ;
overflow :auto ;
}
.right
{
display : table-row;
background : gray ;
height : 26.66666666666667%;
width : 100% ;
overflow : auto ; 

}

}

最佳答案

要解决大多数 CSS 跨浏览器问题,请尝试重置 CSS。您可以从 here 获取最新的.

我向您推荐normalize.css,因为我以前用过它,它非常适合解决此类问题。但是测试所有这些并检查哪一个满足您的需求。

关于html - 如何解决跨境高度和边距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39888107/

相关文章:

css - 寻找带有右侧导航栏的 Bootstrap 仪表板

css - Flexbox 调整子宽度大小应仅更改下一个同级宽度

html - 使用 CSS 最小限度地包围文本

javascript - 使用 HTML 背景视频创建视差效果

javascript - 如果我滚动到某个位置,如何淡入元素

jquery - 动态 CSS 与 jQuery?

html - 对齐图像 CSS

css - 小 div 内的大图像,没有裁剪或纵横比变化

html - 试图在缩略图悬停时显示大图像

javascript - 如何消除作为字体的阻塞 CSS?