Category Archives: 前端

CSS HTML 前端

跨浏览器任意内容的水平垂直居中

二月 11, 2012 – 5:29 下午

IE6、7一日不死，被折腾的人就层出不穷。

以前只是想办法让图片在所有浏览器中在固定容器里水平垂直居中，现在遇到的则是要让一些内容（由图片、文字等组成）在固定容器中水平垂直居中。过程就不说了，以下提供的关键点就在table、display: inline-block上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!DOCTYPE html>
<html>
    <head>
        <title>table vertical align</title>
        <style>
            #container {
                width: 400px;
                height: 400px;
                text-align: center;
                background-color: orange;
            }
            #wrapper {
                width: 100%;
                height: 100%;
                background-color: brown;
            }
            #content {
                display: inline-block;               
                *display: inline;
                *zoom: 1;
                text-align: left;
                background-color: green;
                color: white;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <table id="wrapper">
                <tr>
                    <td>
                        <div id="content">
                            <h2>here is title</h2>
                            <span>here is additional message</span><br />
                            <a href="#">OK</a>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

#content所在部分可以替代为一张图片，这样可以实现对图片在固定容器里的水平垂直居中，而其他的复合内容则需要放置在#content中。

Tags , , , , , , , , , , , , , , , | Permalink | Comment (0)
CSS HTML 前端

webkit font-size 12px bug

十月 13, 2011 – 4:34 下午

基于webkit核心的浏览器，如chrome、safari等，在显示小于12px的英文字符时始终会显示为12px。解决这一问题，只需要在设置字体的地方，添加以下css代码：

-webkit-text-size-adjust: none;

这样问题就迎刃而解了。

Tags , , , , , , , , , | Permalink | Comment (0)
HTML JavaScript 前端

本地图片预览及大小获取

十月 11, 2011 – 10:28 上午

内容涉及范围：使用input file选择图片后，在不提交至服务器的情况下，预览选择的图片，获取图片文件的大小。

先说一些结论，在默认设置的情况下，ie6和firefox6可以预览和获取大小；ie7-9只能预览；chrome13只能获取大小。只能预览或只能获取大小的，很大程度上都是由浏览器的安全策略造成的。

接下来是一些详情，

html代码：

<input id=”file” type=”file”" />
<div id=”div”>
<img id=”img” />
</div>

各浏览器图片预览及大小获得：

浏览器（版本） 图片预览 大小获得
ie6 设置img.src=file.value 通过img.fileSize获得
ie7-9
  1. 通过file.select()和document.selection.createRangeCollection().item(0).text获取上传文件本地路径filepath
  2. 为div添加filter，即div.style.filter = ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\’scale\’,src=\” + filepath + ‘\’)';
 无法获得，需结合后台功能
firefox6 设置img.src=file.files.item(0).getAsDataURL() file.files.item(0).fileSize或者file.files.item(0).size
chrome13 无法通过前端方法本地预览，需结合后台功能，即上传文件后展示 file.files.item(0).fileSize或者file.files.item(0).size

在ie7-9、firefox6及chrome13下，浏览器出于安全考虑，无法通过file.value获得选择图片的本地路径，其中ie7-9和chrome13获得的是经过处理的本地路径，而firefox6下获得的是图片的名称。

Tags , , , , , , , , , , , , | Permalink | Comment (0)
CSS HTML 前端

图片垂直居中

九月 27, 2011 – 1:15 下午

小乔的解决方案，这应该算是终极的多浏览器兼容的方案了，目前常用的浏览器（ie6-9，firefox，chrome）都是兼容的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<style type="text/css">
	.float-div {
		float:left;
	}
 
	.img-wrapper {
		border:1px solid gray;
		width:100px;
		height:100px;
 
		text-align:center;
 
		display:table-cell;
		vertical-align:middle;
		*display:block;
	}
	.img-wrapper * {
		vertical-align:middle;
	}
	.img-wrapper span {
		*display:inline-block;
		*height:100%;
	}
	.img-wrapper img {
		border:none;
	}
</style>
 
<div class="float-div">
	<a href="#" class="img-wrapper">
		<span></span>
		<img src="80x80.png" alt="80x80" />
	</a>
</div>

但是，以上方案在ie6下会受word-wrap:break-word的影响，需要修改word-wrap为normal。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<style type="text/css">
	.float-div {
		float:left;
	}
 
	.img-wrapper {
		border:1px solid gray;
		width:100px;
		height:100px;
 
		text-align:center;
 
		display:table-cell;
		vertical-align:middle;
		*display:block;
	}
	.img-wrapper * {
		vertical-align:middle;
		word-wrap:normal;
	}
	.img-wrapper span {
		*display:inline-block;
		*height:100%;
	}
	.img-wrapper img {
		border:none;
	}
</style>
 
<div class="float-div">
	<a href="#" class="img-wrapper">
		<span></span>
		<img src="80x80.png" alt="80x80" />
	</a>
</div>
Tags , , , , , , , , , , , , | Permalink | Comment (0)
HTML JavaScript 前端

form.action’s bug in ie6、ie7

九月 6, 2011 – 11:13 上午

这样一个表单

1
2
3

<form id="myForm" action="">
  <input type="hidden" name="action" id="hiddenAction" />
</form>

当你是用javascript修改form的action时，你会考虑哪种方式呢？
第一种：myForm.action = ”
第二种：myForm.getAttribute(‘action’) = ”
第三种：myForm.attributes['action'].value = ”

在这种情况下，推荐使用第三种，因为第一种和第二种在ie6和ie7下会导致你的表单不能提交到正确的地址。

深究的话，myForm.action == myForm.getAttribute(‘action’) == hiddenAction。

现代浏览器为了兼容旧浏览器，支持使用节点的name值来直接访问form中的节点，也就是说，你使用myForm['action']或myForm.action访问到的是name值为action的input。而ie6和ie7中的bug就是，你使用getAttribute访问form的属性时，被误认为是访问form的节点。这一点在ie8以上已经修复了。

最后不得不呼吁一下，赶紧升级浏览器吧，还不知道有多少bug呢。

Tags , , , , , , , | Permalink | Comment (0)
CSS

css selector

七月 20, 2011 – 4:45 下午

本文从不是很专业的角度记录一下css选择器。详细的请参见w3school中css选择器。

有哪些选择器？元素选择器，类选择器，ID选择器，属性选择器，*自身选择器，后代选择器，子元素选择器，*后置相邻兄弟选择器，伪类，伪元素。

这些选择器的详细信息，这里不赘述，看上面的w3school。

如果要对多组元素应用同一样式，可以使用“,”将各组隔开。

如果要选择某类元素的后代，使用空格，选择其子元素使用“>”。

选择某个（些）元素的后的相邻兄弟元素，使用“+”，称为“后置相邻兄弟选择器”应该更加妥当。

而如果要选择某类元素（如p）中的某一个（些），假设要选中的那个有class=”clsA”，你可以使用p.claA。

注意：p.clsA之间没有空格，如果存在空格则变成了后代选择了，也就是选择p标签的后代中拥有clsA的元素。这种选择方式，我称为自身选择器。这种选择方式目前发现只能应用于使用类选择器的地方。

另外一个例子，.clsA.clsB。这也是自身选择器，比较有意思的地方，首先这两个类名被应用于同一个元素，其次这两个类名没有先后顺序，没有紧密要求（你可以在clsA和clsB中插入任意多个其他的类名）。

伪类实际上跟自身选择器有些类似，不过表示形式不同，而且被规定为就那么几个。像p:first-child，可以解释为：第一个作为后代元素的p。而p>i:first-child，可以解释为：第一个作为p子元素的i。

伪类和伪元素，以及类，都是对选择的元素本身或者文本应用样式。

另外，一些优先级的问题：

1、样式引入优先级。与当前展示的文档关系越紧密优先级越高。优先级从左到右，越来越低。

标签中的style -> head中的style -> 外部文件（link） -> 浏览器默认

2、样式覆盖优先级。选择器对要选择的元素越准确，优先级越高。优先级从左到右，越来越低。

标签中的style -> id选择器 -> 类选择器 -> 标签选择器

更加复杂的环境，需要仔细分析，样式覆盖优先级仅供参考。

Tags , , , , , , , , , , , , , , , , , , | Permalink | Comment (0)
CSS HTML

div中image垂直、水平居中

五月 27, 2011 – 2:58 下午

一张图片，栖身于一个div构成的囹圄中，不上不下，必须垂直居中、水平居中。为此，本来一层的牢房，就要多出一层，而为了ie还得再加一层。最为一张只是想待在div中央的图片，你伤不起啊。

1
2
3
4
5
6
7
8
9

<div class="outer">
  <div>
    <div>
      <span class="inlinEl">
        <img src="http://a1.att.hudong.com/08/30/01300000369368125422300747744_s.jpg" alt="" />
      </span>
    </div>
  </div>
</div>

为兼容多个浏览器，使用多层嵌套。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.outer {
  #position: relative;
  width: 100px;
  height: 100px;
}
.outer div {
  width: 100%;
  text-align: center;
  #position: absolute;
  #top: 50%;
  *left: 0;
}
.outer div div {
  display: block;
  text-align: center;
  #position: relative;
  #top: -50%;
}
.outer div div img {
  vertical-align: middle;
}
.outer .inlinEl {
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  height: 100px;
}

除ie6，其他浏览器使用常规的display: table、display: table-cell和vertical-align: middile来实现垂直居中。ie6下垂直居中通过加#部分实现。最后一段样式，针对img在firefox、chrome下无法正常居中做的一些调整，不添加这一段样式，可能会出现图片在中部偏上。

PS 关于hack，ie6使用#或者_，ie7使用+，ie6和ie7使用*。

除ie，其他浏览器（firefox，chrome）通过为.outer div div添加display: block，使得text-align: center起效。因为image外层div跟image勾结，把自己变成了内联元素。而ie下，直接通过text-align: center实现水平居中。

另外，需要注意的是，需要设置outer的width、height和inlinEl的width、height相同。

为什么增加inlinEl？因为chrome下不正常。【万恶的浏览器啊】

可不可以在img的上一层div上使用inlinEl？可以。但是ie下不正常。【万恶的ie啊】

后来，测试一下多文本居中，此方法可以正常工作，只需要将span.inlinEl的内容替换成需要居中的内容即可。

HTML代码如下，span.inlinEl中可以使用多种标签的组合。

1
2
3
4
5
6
7
8
9

<div class="outer">
 <div>
  <div>
   <span class="inlinEl">
3.Approved RFQs are placed in the Customized Sourcing channel for suppliers to view and quote. Our Industry Specialist will also send the RFQs to matching suppliers.
   </span>
  </div>
 </div>
</div>

CSS代码如下，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.outer {
  #position: relative;
  width: 374px;
  height: 75px;
}
.outer div {
  width: 100%;
  #position: absolute;
  #top: 50%;
  *left: 0;
}
.outer div div {
  display: block;
  #position: relative;
  #top: -50%;
}
.outer .inlinEl {
  display: table-cell;
  vertical-align: middle;
  width: 374px;
  height: 75px;
 
  font-size: 12px;
  line-height: 20px;
}

PS 垂直居中参考资料http://blog.bingo929.com/css-vertical-center.html

在如此纠结的情况下，还不如使用table来实现垂直居中了，实现起来方便多了。

Tags , , , , , , , , , , , , , , , , | Permalink | Comment (0)
JavaScript YUI

javascript札记

五月 12, 2011 – 9:08 上午

YUI获取未指定width、height元素的宽和高。offset，screen，client。

ie6下，div遮罩select。

节点插入，appendChild和insertBefore。

Tags , , , , , | Permalink | Comment (0)
YUI

YUI in memory

四月 8, 2011 – 7:10 下午

YUI第一次使用，因为有了使用jQuery的基础，相对来说，上手可能比较容易，当然也会在使用过程中觉得YUI的使用没有jQuery方便。这也是为什么jQuery能够迅速的发展的原因之一，write less， do more。

其实，应该这样理解，YUI是类似于jQuery、jQueryUI及一些jQuery插件的集合，所以相对于jQuery来说，肯定是要复杂一些了。另外，jQuery从某种程度上开说是一个工具箱，有些功能有，有些功能需要第三方扩展。而YUI是一种解决方案，几乎什么都有。

言归正传，初步来看，YUI提供的onDomReady方法，与jQuery中的ready方法相当。

YUI中获得页面标签元素返回的是HTML Element。对获得的元素，你可以使用原始的JavaScript的Dom方法。获取元素的方法有好几个，这一点上没有jQuery简洁。这些方法包括：get，getElementBy，getElementsByClassName。详细的可以参考YUI官方文档。

YUI使用了大量的命名控件，跟.NET差不多，所以使用时，你需要考虑尽可能只引用需要的库。毕竟所有的东西都在YAHOO这个根命名控件下，有时候真为它担忧啊。

YUI中为元素绑定方法使用的是YAHOO.util.Event.on，老长一段。需要注意的是，推荐你在使用YUI前，为你要使用的元素定义ID。从目前来看，还是使用ID获取元素比较方便。

Tags , , , , | Permalink | Comment (0)
jQuery Linux

Fix:fancybox.cancel, installing arch

三月 28, 2011 – 7:05 下午

上一篇讲到取消显示fancybox时，使用$.fancybox.cancel()。后来仔细看了一下官方API，以及官方的示例，得出的结论是我错了。先看官方示例的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$("#various7").fancybox({
	onStart	:	function() {
		return window.confirm('Continue?');
	},
	onCancel	:	function() {
		alert('Canceled!');
	},
	onComplete	:	function() {
              alert('Completed!');
	},
	onCleanup	:	function() {
              return window.confirm('Close?');
	},
	onClosed	:	function() {
              alert('Closed!');
	}
});

在显示fancybox前，做一些判断，只需要将该判断放在fancybox的自定义方法onStart中，通过return的值来确定是否继续显示fancybox。

那么，$.fancybox.cancel是做什么用的呢？官方API中是这样说的“Cancels loading content”。

———————————————————————————————————–

上一次折腾的arch，安装的是gnome桌面环境，这一次安装了lxde和xfce。从安装文件大小、界面美观、使用方便等多方面考量的话，xfce确实是个不错的桌面环境。

比起gnome、kde安装文件就有200兆左右，xfce只需要60兆左右，至少对于我这种迫不及待的人来说，可以接受。

另外，xfce相对于lxde除了美观之外，也预装了一些软件，对于新手来说，避免自行安装软件的纠结。首先不知道装什么软件，其次不知道装哪款软件。

当然，xfce也不是没有不足的地方，例如自动挂载u盘就给我找了麻烦。结合官方文档LXDE和XFCE，大致操作如下：

【xfce自动挂载u盘】
pacman -S hal。
nano /etc/rc.conf，在DAEMON的dbus后添加hal。/etc/rc.d/hal start。
pacman -S pmount。
重启。

除此之外，你可能还需要安装一下软件

pacman -S gvfs
pacman -S thunar-volman

PS 本来想说firefox虽好，也有让我不满意的地方，然而我错了，因为不满意的是我尚未发觉的改进。

Tags , , , , , , , , , | Permalink | Comment (0)
第 1 页，共 2 页12

下一页 »