某个土壤检测网页项目记录

CSS死活设不了高度比例
原因：高度和宽度不同，父辈没指定高度设不了高度百分比
解决：html,body设置高度100%，依次设定下去
padding、margin设成百分比，是相对父辈的宽度
span行级元素设置不了宽高
解决：display:inline-block
插入的背景图看不到
解决：一定要设置高度，注意行级元素
不知道为什么，背景图设为fixed反而会滚动，去掉就没事了
li子元素设置了float，ul父元素不设置，li就不是ul子元素了

用jQuery做滚动条时候：

主要要解决：滚动条的移动距离和内容移动距离的算法。我依靠比例得出来，不精确的部分，直接赋值了，反正没多大影响。

鼠标点击滑动会选中页面（变成蓝色）：
解决：CSS里面写：html,body{-moz-user-select: none; -khtml-user-select: none; user-select: none;}
不过在IE下面没效果
于是换成了
<div unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
unselectable为IE准备
onselectstart为Chrome、Safari准备
-moz-user-select是FF的
1、 none：用none,子元素所有的文字都不能选择，包括input输入框中的文字也不能选择。
2、 -moz-all：子元素所有的文字都可以被选择，但是input输入框中的文字不可以被选择。
3、 -moz-none：子元素所有的文字都不能选择，但是input输入框中的文字除外。

直接用jQuery解决了点击滚动、拖动滚动的问题，关于滚动鼠标滚轮滚动，觉得可以用自带的滚动实现，隐藏默认滚动条就行了（因为嫌再用scroll写太麻烦，或者根本写不出来orz）
于是上网查了隐藏方法：遮住····，可以，很机智，很强势
参考网上的美好设置：
作为框框的div要设置高宽overflow
作为内容的div：
width: 102%;height: 100%;overflow-y: auto;padding-right:30px;
都不能省
结果还是要解决，自定义的滚动条要跟着动的问题。
结果又有了问题：ul设置height100%后，原先靠ul的bottom定位，结果就一直成了0，之前的点击滚动、拖动滚动都用不了了（差点哭出来mmp）
然后决定用li的position().top来解决（如果要设定bottom，记得加Position），注意用jQuery的选器，children只能选择儿子选不了孙子（因为这个又折腾了一阵子才发现）
整理一下自定义滚动条随内容滚动的思路：
通过li的高度（height+margin）*li的个数（length）算出内容可移动的高度MH
通过滚动条总的高度-上下两头空出的高度-按钮高度，算出滚动条可移动的高度SH
鼠标移入内容：mouseenter，获取内容、自定义滚动条初始位置
鼠标开始滚动：scroll，获取内容滚动后位置，减去内容初始位置，得出内容的滚动距离；按照比例（SH/MH）算出滚动条滚动的距离，然后赋值（记得加上初始位置）
完美！
然而最后放弃这个方法，因为和之前的滚动有冲突，无法修复···
找啊找，最终求助于jq的爸爸js
利用js的事件监听，获取鼠标滚轮的滚动事件（滚动触发fn）
obj.addEventListener(“mousewheel”, fn, false)
注意火狐滚轮事件的兼容性问题
obj.addEventListener(“DOMMouseScroll”, fn, false);
再通过event.wheelDelta和event.detail（火狐）判断上滚还是下滚
剩下的工作和之前的滚动差不多，解决了