html退出全屏前后宽度不一致,CSS：浏览器窗口改变会影响页面样式，如何处理？...

问题描述

全屏浏览时，貌似没什么问题

当我更改浏览器窗口大小时，页面样式就出现奇怪现象了

请问为什么会出现这种情况，如何更好的处理呢？

相关代码

index.html

Document

• 城市

• 你好，请登录  

  免费注册

• 我的订单

• 我的京东

• 京东会员

• 企业采购

• 客服服务

• 网站导航

• 手机京东

./css/minireset.css

/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */

html,

body,

p,

ol,

ul,

li,

dl,

dt,

dd,

blockquote,

figure,

fieldset,

legend,

textarea,

pre,

iframe,

hr,

h1,

h2,

h3,

h4,

h5,

h6 {

margin: 0;

padding: 0;

}

h1,

h2,

h3,

h4,

h5,

h6 {

font-size: 100%;

font-weight: normal;

}

ul {

list-style: none;

}

button,

input,

select,

textarea {

margin: 0;

}

/* html {

box-sizing: border-box;

}

* {

box-sizing: inherit;

}

*:before, *:after {

box-sizing: inherit;

} */

img,

embed,

object,

audio,

video {

height: auto;

max-width: 100%;

}

iframe {

border: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

td,

th {

padding: 0;

text-align: left;

}

/* 自定义 */

a {

text-decoration: none;

}

./css/common.css

body {

font-size: 12px;

}

/* 版心 */

.w {

width: 1190px;

margin: 0 auto;

}

.jd-red {

color: #f10215 !important;

}

./css/index.css

/* 快捷入口 */

#shortcut {

border-bottom: 1px solid #ddd;

background-color: #e3e4e5;

}

#shortcut .w {

height: 30px;

color: #999;

}

#shortcut a {

color: #999;

}

#shortcut a:hover {

color: #e33333;

}

#shortcut-left {

float: left;

}

#shortcut-right {

float: right;

}

#shortcut li {

float: left;

}

#shortcut li.spacer {

width: 1px;

height: 10px;

margin: 10px 5px 0;

background-color: #ccc;

}

#user-city {

margin-left: 200px;

}

.shortcut-btn {

line-height: 30px;

padding-left: 7px;

padding-right: 7px;

}

.dropdown {

height: 28px;

line-height: 28px;

border: 1px solid #e3e4e5;

}

.dropdown:hover {

padding-bottom: 2px;

border-color: #ccc;

border-bottom: none;

background-color: #fff;

}