我一直在寻找双固定滑块使用的是MooTools（有两个旋钮，最大和最小的滑块）。 虽然，我没有找到做得好双固定滑块在MooTools的论坛，唯一的问题是，所有这些滑块力选定的范围标记。 终于来了！ 我决定创建自己的。 好吧！ 我使用的原代码并修改它有一个滑块的背景，选择的范围，在我下面的例子直观。 蓝色区域表示值的范围内选择。
查看2.2版本演示 | 下载Mootools的双铰接滑块版本2.2 （下载11864次）
你可以很容易改变的外观和感觉范围指示灯（蓝色在上面的例子），旋钮，滑块，滑块轨道需要通过修改的slider.css作为。
不要给我发评论，如果你觉得它有用。
之前，我们不得不处理与CSS创建页面布局，调整表格单元格内的一些内容似乎只是孩子的发挥。 只需设置“ 对齐 ”或“valign”属性表中有您所选择的路线，这块蛋糕！
使用CSS布局，尽管我们有“垂直对齐”为元素的属性，它不似乎是简单的“ 对齐 ”或“valign”属性。 为了更specifiic“ 垂直对齐 ”似乎从来没有解决您的任何问题，特别是如果是写一个跨浏览器的CSS。
如果没有使用HTML表格，对象为中心的问题，是图片或一些文字内含有分裂，可能是每个UI / CSS开发人员在某些点的噩梦。 这一问题作进一步的调整，如果要居中的对象是动态的性质，即当它的高度是可变的推断您的后顾之忧（未知的高度）。
虽然有没有已知的直线前进的解决方案，跨浏览器，我们必须处理的范围，将工作，我曾试图在没有到达的解决方案似乎工作中，我曾尝试在一些浏览器（IE6，IE浏览器7 FF）。
解决方案：
在浏览器如Mozilla，Opera和Safari，但奇怪的行为“ 垂直对齐 ”的属性可带来的感觉，只是含分工“ 显示 ”属性设置“ 表格 ”（显示：表单元）， 。
问题仍然存在与IE浏览器的家庭，谁，但似乎并没有理解“ 细胞表 ”财产和无知，因为他们，他们就忽略它。 虽然简单，广告几多个DOM元素的HTML使事情发生，如下的解决方案。
CSS和HTML看起来像这样
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}的HTML： -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/>意见：3456 </ DIV>
</ DIV>
</ DIV>
结果看起来像这样： -
顶部对齐的CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}的HTML： -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/>意见：1234 </ DIV>
</ DIV>
</ DIV>
结果看起来像这样： -
底部对齐的CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
的HTML： -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/>意见：1234 </ DIV>
</ DIV>
</ DIV>
结果看起来像这样： -
好像年龄，因为我试图找到一个合理的解决方案，这对准问题。 但现在，这一解决方案，我觉得在小和平。
希望有一天
下载上述解决方案在这里的CSS和HTML （下载452次）..易懂，CSS是没有得到优化
注：顺便说一下，这些都是一些我点击图片的缩略图... 
非IE浏览器的CSS：没有消息，如下面的例子CSS子选择，似乎并不在IE浏览器的CSS开发。
例如DIV>跨度一些CSS，这意味着“当一个span元素的表决元素的子（不是一个孙子或伟大的盛大孩子等）”。
但我们用这种正反向我们的优势。 从历史上看，孩子的选择已被用于隐藏IE 的CSS命令。 简单地把html>body任何CSS命令 IE 前将忽略它：
html>body .foo { CSS commands go here ;}
这工程，因为<body>总是一个孩子<html> -当然可以永远是一个孙子或曾孙<html> 。
现在，IE 7的了解孩子的选择，你有大于号后直接插入一个空的注释标记，然后IE 7将不明白这个选择（谁知道这是为什么？），因此会完全忽略这个CSS命令。
html> /**/ body .foo { CSS commands go here ;}
如果尚未看到这些之前，通过以下只读
像往常一样，多一些奇怪的问题与IE和这个人都必须在TOP 10 IE的怪癖队伍之一。
问题的声明（这是我的问题，也许你也有类似的违法行为）：
我有很多的DIV的页面与类“sectionhead”，这只不过是第一个页面上的标题。 所以我有一些这样的风格寻找
，sectionhead {字体大小：18px;背景：＃cfcfcf;填充：5PX;}
DIV的是一些黑色文本的浅灰色栏。 在IE浏览器的情况是这些节头显示OK，但也有一些无形的，直到您滚动页面或点击页面上的等东西，有时候他们往往消失，当你点击“ALT”键，当你页面或滚动卷轴。 他们有时似乎再现，当你重新载入（F5）页面。 我与一些简单的风格完全简单的div的行为坏。
什么可能导致这种反常行为呢？ 好吧！ 坦率地说，不知道！
可能的解决方案：
再不要问我为什么，但这个问题在许多情况下趋于消失，当您添加的位置是：相对的不当行为元素的样式，这样，
，sectionhead {字体大小：18px;背景：＃cfcfcf;填充：5PX;位置：相对}
奇怪，但该说些什么呢？ 上帝保佑我从IE浏览器！
和DO美国的市场份额，如果你有类似的问题。
不是只有少数的灯箱时，你可以找到你谷歌。 灯箱，我发现大部分的问题是，他们似乎都使用一个或其他重JavaScript框架如jQuery，原型，MooTools和喜欢。 他们都是冷静和时髦的期待。 但是，如果你的要求是：“ 但我想一个我的网站的简单和轻量级的灯箱脚本 ”，然后在这里，它是;
这个灯箱一些不错的功能
jo.js，jo_pack.js [包装版本]： -一个简单的JavaScript对象集[联办]，其中包含的元素，窗口和文件定位脚本。 你可以打开JO.JS，如果你想创建抽象的功能，一些高级Javascripting让你的手脏，延长元素的属性等。 如果你不是太在Javascripting多少，不要管它。
lightbox.js，lightbox_pack.js [包装版本]： -包含灯箱经理脚本。 如果你是网页设计师，还负责执行页面上的灯箱，你需要了解LightBoxManager。 LightBoxManager基本上包含两个功能showLightBox，和closeLightBox。
lightbox.css： -如果你知道的CSS，你可以发挥与lightbox.css定制的外观，N-感觉lightbox.css
灯箱两种不同的内容，实施的index.html：样品
lb_underlay_bkg.png： -这是光/西米透明图像用于灯箱底图的背景[底图是低于lighbox，防止用户点击页面上的任何其他实体层，而灯箱开放]。 为此目的，你可以使用任何图像或纯色，取决于的页面设计和要求。
icon_lb_close.gif： -灯箱右上角密切灯箱手柄上的形象。 按设计可以使用任何图像
请让我们有您的意见和反馈...
