xiaolingzi's blog

每天都在成长...

欢迎您:亲

一个页面布局中可能会碰到的一个小问题

xiaolingzi 发表于 2012-11-23 17:45:51

今天在浏览CSDN时,有人提出了这样一个简单的问题,首先我们先看一下代码:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        body{ padding:0; margin:0;}
        .header {width:1000px; height:80px; background:#41A224; margin:0 auto;}
        .main {width:1000px; height:100px; background:#FF8000; margin:0 auto;}
        .footer { width:100%; height:30px; background:#000000;}
    </style>
</head>
<

阅读全文

css浏览器兼容性之input的一些测试

xiaolingzi 发表于 2012-10-31 23:32:41

前几天在写网页的时候,又发现input浏览器兼容性上会出现一点问题,所以干脆就测试一下看看究竟。

好吧 我们先看一段代码

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        .container{ width:200px; height:30px; background:#41A224;}
        .input{width:180px; height:30px; border:none; background:#FF8000;}
    </style>
</head>
<body>
    <div class="container">
        <input class="input" type="text" value="text" />
    

阅读全文

css实现水平居中和垂直居中及其浏览器兼容性

xiaolingzi 发表于 2012-07-10 23:24:27

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。

浏览器说明:本文涉及到的浏览器及其版本如下(下文涉及到没有写版本号的均以此为准):
IE7
IE8 标准版
IE9 标准版
FireFox 13.01
Chrome  20.0.1132.47
Safari  5.1.7(7534.57.2)
Opera   12

居中元素:分为图片(img)和非图片(div)两种,若要亲自检测请将图片的src改成一个可用链接进行,写此文时用

阅读全文