HTML/CSS

时间 2019-12-07

标签 html css 栏目 HTML 繁體版

原文原文链接

（一）javascript

IE中的input不居中css

解决方法： input{ font:14px/33px "微软雅黑";}html

*注释：33px为input的高度。java

（二）

IE下LI之间的间隙问题
li在IE中固定li的高度以后仍是会有2px下间距web

解决方法：
1.浮动?li{ float:left}
2.加上 li{ vertical-align: bottom;}
3.*+html ul_2 li{margin-bottom:-2px;}算法

（三）chrome

实现body背景拉伸自适应api

html, body 
          {
 /*此部分支持chrome，应该也支持firefox*/
            background: url('/styles/images/bg.jpg') no-repeat center fixed;
            background-attachment: fixed;
            background-size: 100% 100%;

 /*如下是IE部分，使用滤镜*/
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/styles/images/bg.jpg',sizingMethod='scale');
            background-repeat: no-repeat;
            background-positon: 100%, 100%;
            overflow: hidden;
        }

（四）浏览器

规定字符长度为50 网络

<textarea maxlength="50">
Enter text here...
</textarea>

input 也可用maxlength属性

.textarea { resize：none;} 禁止拉伸

（五）

IE9如下的select高度固定为22px。

（六）

选择得到焦点的输入字段，并设置其样式

input:focus { border:solid 1px #ff6600 ；}

（七）

给网站头部加小图标

通常尺寸为16*16 图片格式为ico

若是想收藏书签也有Favicon.ico图标，在上面那段代码下面加入

（八）

超出内容省略号

white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

（九）

z-index层级在IE中无效

1.第一种状况（z-index不管设置多高都不起做用状况）：

这种状况发生的条件有三个：

一、父标签 position属性为relative；

二、问题标签无position属性（不包括static）；

三、问题标签含有浮动(float)属性。

解决办法有三个（任一便可）：

一、position:relative改成position:absolute；

二、浮动元素添加position属性（如relative，absolute等）；

三、去除浮动。

（十）

-moz表明firefox浏览器私有属性

-ms表明IE浏览器私有属性

-webkit表明chrome、safari私有属性

-o-box-shadow表明Opera私有属性

（十一）

当Table中td内容为空时，显示边框的办法

1. 在 table的css里面加: border-collapse:collapse;
在 td 的css里面加: empty-cells:show;

2 .最简单的就是在TD里写个 

（十二）

文档模式设置为默认ie9或者ie8,ie7标准

<metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

（十三）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

删除会致使IE margin：0 auto；失效

（十四）

IE7中th tr 不支持border属性

只能给td加border

（十五）

改变浏览器窗口页面刷新（谷歌生效）

浏览器宽度小于1200像素，内容隐藏

$(window).resize(function(){
        window.location.reload();
        if($(document.body).width()<1200){
            $(".miyb").hide();
         }else{
             $(".miyb").show();
          }
    });

（十六）

line-height属性的细节

line-height支持属性值设置为无单位的数字

语法

line-height: normal | <number> | <length> | <percentage>

normal 根据浏览器决定，通常为1.2。

number 仅指定数字时（无单位），实际行距为字号乘以该数字得出的结果，

能够理解为一个系数，子元素仅继承该系数，

子元素的真正行距是分别与自身元素字号相乘的计算结果。

length 具体的长度，如px/em等。

percentage 百分比，100%与1em相同。

（十七）

英文字母

div{text-transform:capitalize} 首字母大写

div{text-transform:uppercase} 全大写

div{text-transform:lowercase} 全小写

（十八）

input加超连接

网络连接

本地连接

（十九）

背景透明

background-color: rgba(0,0,0,0.5)

background-color:transparent;

（二十）

图片垂直居中

 <div class="shezhi">
    <div class="tubiao">
       <a href="#"><img src="images/tb1.png" width="34" height="34" /></a>
       <span></span>
    </div>      
 </div>

 .tubiao {
    width:89px;
    height:80px;
    float:left;
    border-left:1px solid #cacdce;
    text-align:center;
 }
 .tubiao span {
    height:100%;
    width:0;
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
 }
 .tubiao img {
     vertical-align:middle;
 }

vertical-align:middle; 只对行内元素生效

（二十一）

表格内超出内容隐藏

 table{
   
    table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起做用。 */
 }

 td{
    width:100%;

    word-break:keep-all;/* 不换行 */

    white-space:nowrap;/* 不换行 */

    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

    text-overflow:ellipsis;
    /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一块儿使用。*/
 }

（二十二）

内容左右两端对齐

 .demo{
       text-align: justify;
       text-justify: inter-ideograph;/*IE*/
 }