字体颜色框的CSS IE 和 火狐
css
#mz_font_color{ position:absolute; left:212px; display:none; border:1px solid #000;height:auto; width:auto;}
.mz_color{height:14px; width:14px; display:inline-block; text-align:center; margin:1px;}
.mz_color_show{ border:1px solid #FFF; text-align:center; cursor: pointer;}
.mz_color_hide{ border:1px solid #5690D2; text-align:center; cursor: pointer;}
var color_table = [
["#FF0000", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#FF00FF", "#FFFFFF", "#F5F5F5", "#DCDCDC", "#FFFAFA"],
["#D3D3D3", "#C0C0C0", "#A9A9A9", "#808080", "#696969", "#000000", "#2F4F4F", "#708090", "#778899", "#4682B4"],
["#4169E1", "#6495ED", "#B0C4DE", "#7B68EE", "#6A5ACD", "#483D8B", "#191970", "#000080", "#00008B", "#0000CD"],
["#1E90FF", "#00BFFF", "#87CEFA", "#87CEEB", "#ADD8E6", "#B0E0E6", "#F0FFFF", "#E0FFFF", "#AFEEEE", "#00CED1"],
["#5F9EA0", "#48D1CC", "#00FFFF", "#40E0D0", "#20B2AA", "#008B8B", "#008080", "#7FFFD4", "#66CDAA", "#8FBC8F"],
["#3CB371", "#2E8B57", "#006400", "#008000", "#228B22", "#32CD32", "#00FF00", "#7FFF00", "#7CFC00", "#ADFF2F"],
["#98FB98", "#90EE90", "#00FF7F", "#00FA9A", "#556B2F", "#6B8E23", "#808000", "#BDB76B", "#B8860B", "#DAA520"],
["#FFD700", "#F0E68C", "#EEE8AA", "#FFEBCD", "#FFE4B5", "#F5DEB3", "#FFDEAD", "#DEB887", "#D2B48C", "#BC8F8F"],
["#A0522D", "#8B4513", "#D2691E", "#CD853F", "#F4A460", "#8B0000", "#800000", "#A52A2A", "#B22222", "#CD5C5C"],
["#F08080", "#FA8072", "#E9967A", "#FFA07A", "#FF7F50", "#FF6347", "#FF8C00", "#FFA500", "#FF4500", "#DC143C"],
["#FF0000", "#FF1493", "#FF00FF", "#FF69B4", "#FFB6C1", "#FFC0CB", "#DB7093", "#C71585", "#800080", "#8B008B"],
["#9370DB", "#8A2BE2", "#4B0082", "#9400D3", "#9932CC", "#BA55D3", "#DA70D6", "#EE82EE", "#DDA0DD", "#D8BFD8"],
["#E6E6FA", "#F8F8FF", "#F0F8FF", "#F5FFFA", "#F0FFF0", "#FAFAD2", "#FFFACD", "#FFF8DC", "#FFFFE0", "#FFFFF0"],
["#FFFAF0", "#FAF0E6", "#FDF5E6", "#FAEBD7", "#FFE4C4", "#FFDAB9", "#FFEFD5", "#FFF5EE", "#FFF0F5", "#FFE4E1"]];
var font_color = function(){
var str="";
str +='<table id="mz_font_color" cellspacing="0" cellpadding="0" border="0">';
for(i=0;i<13;i++)
{
str +='<tr>';
for(s=0;s<10;s++)
{
str +='<td class="mz_color_show" onmousedown="changecolor(\''+color_table[i][s]+'\')" onmousemove="font_color_show(this)" onmouseout="font_color_hide(this)"><span style="background-color:'+color_table[i][s]+'" class="mz_color"></span></td>';
}
str +='</tr>';
}
str +='</table>';
return str;
}
function font_color_show(id){
id.className ="mz_color_hide";
}
function font_color_hide(id){
id.className ="mz_color_show";
}
ie6 - ie8 样式 颜色框被拉长了
ie9 和 火狐下面的正常
[解决办法]
设置一下 font-size:0;
.mz_color{font-size:0;height:14px; width:14px; display:inline-block; text-align:center; margin:1px;}