web开发中遇到的问题

本文介绍web开发中遇到的各类问题

1.<meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge,chrome=1">

2.<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

3.<meta name="author" content="。。。" />

4.javascript:void(0),伪协议，a标签跳转/做按钮？

5.session VS cookie & what is session?

　　参考链接：http://machinesaredigging.com/2013/10/29/how-does-a-web-session-work

　　The session is a key-value pair data structure.我们可以看下方的图来理解：

　　如果我们的session是在server上进行管理的，当用户登录他们的账户时，就会在服务端初始化一个session_id，这个id中存储了用户的id号和姓名等信息。如果session是在browser上创建的，它就会被存储在浏览器中，就像cookie一样。

　　然后，我们来讨论server上的session的相关问题。

　　1.每个网站或者APP都要大量的用户,而且每个用户对应一个session_id。那么server如何知道哪个session_id是你的？你的session_id什么时候会用到？

　　先来说明第一个问题。

　　如图所示：

第一步，发送登录请求时你的session_id通常包含在cookie中一起发送到服务端。
第二步，在服务端的内存中根据发送的session_id进行匹配。
第三步，如果匹配到了你的session_id，则会在从数据库中提取你的相关信息。it makes the data in entry 5 available to the code engine.
第四步，将server上的数据放在cookie中作为http response返回到客户端。

　　6.input type=file上传图片文件的问题。time:2016-08-17~2016-08-23

　　　　概述

　　　　6.1本地图片预览 |--现代浏览器：使用FileReader方法，利用file对象。（说明IE不兼容file对象）；通过FileReader实例化对象的.result方法获取目标文件的路径path;

　　　　　　　　　　　　|--IE8+：借助type=file的input文件的select方法，然后通过document。selection.createRange().text得到目标的路径path;

　　　　6.2本地文件上传到又拍云的解决方案 |--现代浏览器：upyun插件（succeed）

|--IE8+：plupload（fail，go on...）

　　7.IE8的兼容问题

　　　　7.1 透明度兼容：filter:alpha(opacity=1~100);

　　　　7.2 background-size兼容：filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片地址', sizingMethod='scale');

　　　　7.3 IE中，通过js拼接html结构时必须严格按照html标签书写规范，否则结构会爆炸，页面无法显示内容；

　　　　7.4 div包含img出现的3px的bug，处理方案：

　　　　　　　1）设置div{font-size:0;}

　　　　　　　2）设置img{display:block;}

　　　　　　　3）设置img{vertical-align:top;}

　　8.纯css制作的三角形

　　　　参考代码：

div{
　　width: 0;
　　height: 0;
　　border-left: 10px solid transparent;
　　border-right: 10px solid transparent;
　　border-top: 20px solid #2c8e9f;
　　border-bottom: none;
}

　　9.图片尺寸问题

　　　9.1图片尺寸的处理方案

　　　　　9.1.1 固定宽高，例如1190*500

　　　　　9.1.2 对图片进行裁切，显示部分内容。，例如图片宽/高<容器宽/高，图片进行垂直水平居中显示，超出部分hidden。

　　　　　　附：未知宽高的元素进行垂直水平居中的代码

<style>
    .container {
        width:800px;
        height:600px;
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        line-height:600px;
    }
    .container  img {
        display:inline-block;
        vertical-align:middle;
    }
</style>
<div class="container">
    <img src="" alt="" />
</div>

web开发中遇到的问题

推荐阅读