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*/
 }

相關標籤/搜索

htmlcss

CSS

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。