Tag 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)