鍍金池/ 問(wèn)答/HTML/ iview <Table> <Page> webpack

iview <Table> <Page> webpack打包發(fā)布后樣式問(wèn)題

上線前本地調(diào)試

clipboard.png

上線后（通過(guò)webpack打包）

clipboard.png

受影響的包括
<Table>中的表格高度， 表格內(nèi)字體大?。?br><Page>中的翻頁(yè)箭頭的位置從居中變成的頂頭

引入iview.css的方式是在main.js 中加入的，工程是用vue-cli生成的，本地調(diào)試一切安好，上線使用打包后的文件產(chǎn)生上述問(wèn)題，求大神幫助

import Vue from 'vue'
import iView from 'iview'
import App from './App'
import router from './router'
import store from './store'
import 'iview/dist/styles/iview.css'

Vue.config.productionTip = false
Vue.use(iView)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

通過(guò)chrome的network工具，線上線下所有的js、css、ttf文件都已經(jīng)加載，對(duì)比不出差別
但還是懷疑線上有字體沖突或者是集體加載不正確

3月7日更新
diff 了線上線下的css文件 ，除了cdn的域名以外沒(méi)有任何區(qū)別，可以看到文件名稱里面的hashcode是相同的
clipboard.png

3月7日再更新
發(fā)現(xiàn)與線上線下無(wú)關(guān)，同樣的cdn地址的文件在不一樣的服務(wù)器環(huán)境下產(chǎn)生的效果都不一樣，求大神解惑

回答
編輯回答
使勁操

坑了兩天終于還是靠自己找到了問(wèn)題的答案和vue、i-view、webpack打包都沒(méi)啥關(guān)系，實(shí)際問(wèn)題出在了index.html這個(gè)入口文件上，在vue-cli的index.html里面第一行<!DOCTYPE html>就是問(wèn)題的關(guān)鍵所在，有了這一行，html 會(huì)按照w3c標(biāo)準(zhǔn)模式 document.compatMode:CSS1Compat 來(lái)渲染，否則就會(huì)是噩夢(mèng)的開始，document.compatMode:BackCompat，怪異模式，瀏覽器使用自己的怪異模式解析渲染頁(yè)面，導(dǎo)致出現(xiàn)上文描述的問(wèn)題。
為什么會(huì)出現(xiàn)上傳cdn發(fā)布后得到的效果與開發(fā)環(huán)境不一致，就是因?yàn)閟erver端在集成cdn的js時(shí)使用的index.html里面不包含<!DOCTYPE html>，從而導(dǎo)致了上述一系列問(wèn)題。
從css作用域、編譯打包配置、cdn上傳腳本、cdn服務(wù)器、瀏覽器字體兼容一步一步查到這里，感慨平時(shí)最容易忽略的才是問(wèn)題的關(guān)鍵~

2017年10月16日 15:33