下面的這寫樣式是個人根據瀏覽器的兼容性以及一些前輩的分享,自己所做項目經驗所整理的,不一定適合所有人,但可以給大家作為參考,也是為了大家能夠更方便實用。
/*===== 清除默認的margin的屬性值 =====*/
body,
blockquote,
dd,
dl,
figure,
form,
p,
pre,
h1,
h2,
h3,
h4,
h5,
h6 {margin:0;}
/*===== 字體控制 =====*/
body,
input,
button,
select,
optgroup,
option,
textarea,
pre {font-family: Arial, 'Microsoft YaHei', 'sans-serif';}
/*===== 統一設置列表的margin和padding,以及列表表形式 =====*/
menu,
ul,
ol {list-style:none;margin:0;padding:0;}
/*===== 去除個別瀏覽器圖片底部的幾個像素,以及設置圖片形式鏈接無邊框 =====*/
img {vertical-align:middle; border:0; }
a img {border:0 none;}
/*===== 設置按鈕手勢 =====*/
input[type="button"],
input[type="submit"],
input[type="reset"] { cursor:pointer; } /* 設置字體大小,這部分跟前面寫在一起,IE6中會無效 */
/*===== 設置表格元素的樣式 =====*/
table {border-spacing:0;} /* 合并表格的間隙,去掉單元格之間的間距,如有需要合并單元格為細線表格,可增加 border-collapse:collapse; */
td, th, caption {padding:0;} /* 去除單元格以及caption表頭的padding值 */
/*===== 設置a標簽鏈接無虛線框 =====*/
a {behavior:url(common/link.htc);text-decoration: none;}
area {behavior:url(common/link.htc)}
/*===== 手機版本網頁a標記虛線框問題 =====*/
a:focus { outline:none; -moz-outline:none; }
/*===== 清除浮動 =====*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
.divclear { clear:both;visibility:hidden;line-height:0px; height:0px;font-size:0;}
/*===== 字體樣式設置 =====*/
.textAlign{ text-align:Justify;text-justify:inter-ideograph; }/*左右對齊*/
/*===== 左右浮動 =====*/
.floatleft{float:left;}
.floatright{float:right;}
/*===== 最小高度兼容 =====*/
.minheight500{min-height:500px;height:auto !important;height:500px;overflow:visible;}
/*===== 超出寬度設置為省略號 =====*/
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/*===== 取消chrome form表單的聚焦邊框 =====*/
input,button,select,textarea{outline:none}
textarea{resize:none}
/*===== 取消textarea右下角可拖動手柄 =====
textarea{ resize:none }*/
/*===== webkit 水平居中 =====*/
.divmiddle{display:-webkit-box;-webkit-box-pack:center; -webkit-box-align: center; }
/*===== placeholder占位符顏色自定義 =====*/
input:-moz-placeholder { color: #369; }
::-webkit-input-placeholder { color:#369; }