柠檬工作室 » DIV+CSS http://www.crazylemon.net 上帝无用，天使无用 Thu, 17 Nov 2011 19:39:10 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 如何让PNG格式的透明图片在IE6下正常显示 http://www.crazylemon.net/css/3705.html http://www.crazylemon.net/css/3705.html#comments Sun, 31 Oct 2010 10:53:24 +0000 CrazyLemon http://www.crazylemon.net/?p=3705 接了个业务，帮网友做几个页面，关于彩票的，很奇怪的要求，要在IE6下正常显示

其中有个别图片要求透明，在从PSD提取时遇到问题，就是本来透明的图层，一保存为PNG，就半透明了，变灰了一点

原因是图层混合选项里，斜面和浮雕的阴影模式不透明度不是0%，在保存时，本来透明的也就灰了

以IMG标签显示时，在IE8以上正常显示，即透明，在IE6下本来透明的，变成白底了。参考网上的的解决办法：

首先，为你的图片外套一个DIV层，像这样:

<body> <div class=”flower”></div> </body>

然后，在<head>和</head>之间写入:

<!–[if gte IE 5]>

<style type=”text/css”>

div.flower {

background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);

}

</style>

<![endif]–>

 这样就OK了，要测试在IE6下是否正常显示，可以下载一个工具，IETester，具体的自己上网搜下

还有另一个方法，如下：

<img src=”images/menu-12.png” onload=”fixPNG(this)”/>

<script language=”javascript”>
// 修复 IE 下 PNG 图片不能透明显示的问题
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split(“MSIE”);
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
    var imgID = (myImage.id) ? “id=’” + myImage.id + “‘ ” : “”;
    var imgClass = (myImage.className) ? “class=’” + myImage.className + “‘ ” : “”;
    var imgTitle = (myImage.title) ? “title=’” + myImage.title  + “‘ ” : “title=’” + myImage.alt + “‘ “;
    var imgStyle = “display:inline-block;” + myImage.style.cssText;
    var strNewHTML = “<span ” + imgID + imgClass + imgTitle

   + ” style=\”" + “width:” + myImage.width

   + “px; height:” + myImage.height

   + “px;” + imgStyle + “;”

   + “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”

   + “(src=\’” + myImage.src + “\’, sizingMethod=’scale’);\”></span>”;
    myImage.outerHTML = strNewHTML;
} }

</script>

相关日志

]]> http://www.crazylemon.net/css/3705.html/feed 0 div+css最恶心问题之文字自动换行 http://www.crazylemon.net/css/3548.html http://www.crazylemon.net/css/3548.html#comments Mon, 27 Sep 2010 16:21:17 +0000 CrazyLemon http://www.crazylemon.net/?p=3548 在div中，只要限定了width属性，当一行文字超出这个宽度时，会自动换行，但仅限于文字或单词，即亚洲文字或英文单词，因为原则上自动换行不会截断一个单词或文字，这里主要讨论的是单词，像汉字等古老的象形文字，估计怎么也没的截断吧

所以一个单词，即没有空格符号隔开的字符串（光有标点符号也不行的，按E文书写规范，标点符号后要有个空格），当长度超过width属性限定时，也不会自动换行的，除非用

white-space:normal;word-break:break-all;word-wrap:break-word;

等css规则限定，当然些规则在不同内核的浏览器中表现是不一致的

所以我花了一整天的时间来吃这个亏

为了做个zen cart模板，上了测试产品，描述乱写一串字符，里面没空格，结果造成页面撑开，研究一天无果。。。。还以为是zen cart CSS上的一个BUG，在对比了无数正常站后，还是百思不得其解，以为见鬼了。。。其实只是因为浏览器把这一串当一个单词了，不折分不换行，而正常的描述是不会没有空格的，也不大可能一个单词长度就超过了DIV限定的宽度。。。

心碎。。哥的时间这么不值钱么。。。这屁问题

相关日志

]]> http://www.crazylemon.net/css/3548.html/feed 0 CSS input 针对text,image等type显示不同样式 http://www.crazylemon.net/css/3206.html http://www.crazylemon.net/css/3206.html#comments Sun, 13 Jun 2010 15:25:00 +0000 CrazyLemon http://www.crazylemon.net/?p=3206 <style type=”text/css”>
<!–
INPUT{
 border: 1px solid #D4D0C8;
 width: 200px;
}
input[type=text]
{
 background-color: #FFCC33;
}
input[type=checkbox],input[type=radio]
{
 width: 20px;border: 0px;
}
–>
</style>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=”">
  <input type=”text” name=”textfield” />
  <input name=”radiobutton” type=”radio” value=”radiobutton” />
  <input type=”checkbox” name=”checkbox” value=”checkbox” />
</form>

IE8和火狐均支持

随机日志

]]> http://www.crazylemon.net/css/3206.html/feed 1 CSS之TR标签无法加border的解决办法 http://www.crazylemon.net/css/2083.html http://www.crazylemon.net/css/2083.html#comments Tue, 29 Sep 2009 07:36:33 +0000 CrazyLemon http://www.crazylemon.net/?p=2083 类似如下代码：

.thickBorder {
border-style : solid;
border-width:2 px;
border-color : black;
}

<table border=0 width=100% align=center cellpadding=’0′ cellspacing=’0′ class=’propList’>
<tr class=’thickBorder’>
<td>
…
</td>
<td>
…
</td>
</tr>
</table>

在tr的class里定义的border会无效，只能定义backgrount等属性

解决方法是，将CSS样式定义在td标签里，如下：

.thickBorder td {
border-style : solid;
border-width:2 px;
border-color : black;
}

即OK

相关日志

]]> http://www.crazylemon.net/css/2083.html/feed 5