发现了一个CSDN前端页面的兼容问题

最新推荐文章于 2023-02-07 13:54:01 发布

仔仔嚟

最新推荐文章于 2023-02-07 13:54:01 发布

阅读量440

点赞数 2

分类专栏： html 文章标签：前端

本文链接：https://blog.csdn.net/qq_34960569/article/details/51499556

版权

13 篇文章 0 订阅

订阅专栏

今天第一天创建了CSDN博客，本着互相学习交流的心态，在这里码字···
在犹豫着笔写啥好的时候，一不小心动了以下浏览器，就一不小心的发现了CSDN页面的一个兼容性问题。那就从这个小问题开始吧···

大家看我的博客，在全屏的状态下就这样子的：

这里写图片描述
没有丝毫的异常！
当缩小浏览器之后呢，是这样的：

想必大家已经看出端倪···

对于CSDN这样的博客平台，有这样的问题，是不是值得拿出来写写，即便是个很mini、so easy的小问题，所有我将它拿来当开山之作···

原来的header是：

   #header {
    background: url("../images/title-yellow.png") no-repeat center 21px;
    height: 345px;
    color: #fff;}

并没有给背景定义宽度；并且背景不会随着浏览器的放缩而变动；
而文字：

header h2 {padding:90px 0 0 70px;}

始终相对于浏览器的左边距是70px；因此，浏览器的放缩会影响到文字相对于背景图片的位置；

解决办法：
基于下面内容部分的宽度是1350px，所以给背景png图片1350的宽度；并且居中。代码如下：

header {
    background: url("../images/title-yellow.png") no-repeat;
    height: 345px;
    color: #fff;
    width:1350px;
    margin:0 auto;
    }

这样就能解决！

**当浏览器放缩时：
要么背景和文字一起动；要么背景和文字都不动！**

关注