同一网站header在两台不同电脑上显示效果不一致问题求助

修复方案 #

核心问题说明 #

你遇到的多设备显示不一致问题由以下几处CSS错误导致：

1. 无效属性值：display: center 不存在，浏览器会直接忽略该规则，header布局逻辑直接失效
2. 背景图配置缺失：未设置background-size、background-position、background-repeat，不同设备屏幕宽度不同时，背景图默认按原始尺寸左上角对齐，要么重复拼接要么直接截断
3. 绝对定位基准错误：按钮用了position: absolute，但父元素header未设置position: relative，导致按钮的定位基准是整个页面而非header，设备尺寸变化时按钮位置直接错位

修复后CSS代码 #

header#bannière {
    /* 替换无效的display:center，用flex布局对齐内部元素 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative; /* 作为内部绝对定位按钮的基准 */
    height : 225px;
    width: 100%;
    align-items : center;
    color : #1BBCED;
    text-shadow : #000 0 0 .2em;
    background-image : url(./Ressources/landscape.jpg);
    /* 新增背景图适配规则 */
    background-repeat: no-repeat;
    background-size: cover; /* 等比例缩放填满header，不会变形 */
    background-position: center center; /* 背景图居中对齐 */
}
header#bannière > h1 {
    /* 让h1独占一行，避免和按钮挤在同一行 */
    width: 100%;
    font: bold calc(1em + 2 * (100vw - 120px) / 100) 'Dancing Script', cursive, fantasy;
    text-align : center;
}
.button {
    margin : 0;
    position : absolute;
    -ms-transform: translate(-50%, -50%);
    transform : translate(-50%, -50%);
    background-color: transparent;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font : bold calc(1em + 2 * (50vw - 80px) / 100) 'Dancing Script', cursive, fantasy;
    white-space: nowrap;
}
button#centerButton {
    top : 25%;
    left : 50%;
}
button#rightButton {
    top: 25%;
    left: 90%;
}
button#leftButton {
    top: 25%;
    left: 10%;
}
body {
    /* 去掉浏览器默认边距，避免header两侧出现空白 */
    margin: 0;
    padding: 0;
    background-color : white; /* #A55C9F #1BCCED #243797 */
}

HTML代码无需修改，替换CSS文件内容后即可在不同设备上保持一致的显示效果。

内容的提问来源于stack exchange，提问作者Picolat