web项目实战(一)— —开发中问题收集

html&css篇

1、多个inline-block顶部对齐的问题
将一个block的div分成多个inline-block后出现不能顶部对齐的问题
【解决】给inline-block元素加上vertical-align:top

2、table和tbody之间有间隔

【解决】设置table的css样式：border-collapse: collapse;

table中的tb不按设定的colspan的比例显示宽度
【解决】设置table的css样式：table-layout: fixed;

React&Webpack篇

1、webpack打包后打开服务器报 can’t find favicon.icon，找不到网页小图标
1、require my favicon in my main App.js entry file
require(‘../assets/images/favicon.ico’)

或者11、在img在require加载

<img src={require('../../images/pluralsight-logo.png')} />

2、Added a loader configuration that does not scramble the image file names in the build task (per this thread webpack/webpack#1336 (comment))

  {
      test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
      loader: 'file-loader?name=[name].[ext]'  // <-- retain original file name
  }

三、webpack构建后的output输出js为空

<script />//错误，script不能自闭合
<script type="text/javascript" src="./bundle.js"></script>

其他

一、让百度地图支持https协议
  当前页面是https协议, 但是百度异步加载API给的是http协议的链接，所以会出现如下:
Mixed Content: The page at ‘https://….’ was loaded over HTTPS, but requested an insecure script ‘http://api.map.baidu.com/api?v=1.4&callback=initializeBaidu’. This request has been blocked; the content must be served over HTTPS.

解决方案参考链接：
  百度Javascript Api主页：http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction

 1. 如果使用JavaScript API ，需要加一个特殊字段 (s=1)：
https://api.map.baidu.com/api?v=2.0&ak=你的密钥& s=1；
【注意】仅JavaScript API V2.0 版本支持https，其他JavaScript API版本均不支持
  ==>https协议的异步加载的url改为https://api.map.baidu.com/api?v=2.0&ak=your_appkey&s=1&callback=initialize

 2、如果是在浏览器端访问，可以设置浏览器加载’不安全的脚本’也可正常加载百度地图

参考:https://github.com/coryhouse/react-slingshot/issues/128