Category ArchiveHTML/XHTML/CSS
HTML/XHTML/CSS & 技术 04 Jun 2008 11:24 am
textarea在ie7存在自适应宽度bug
使用css width:99%控制宽度，当你从文本文件中粘贴一篇无换行的文章时，textarea的滚动条会自动跳至文本框顶部，影响输入。估计是ie7不能准确显示无换行内容的高度，在ie6,ff下无此问题。
解决方法是去掉css,在textarea中用cols=90 写死宽度，IE7宽屏显示效果会差点，在FF下由于外部套了table仍然会自适应宽度。
HTML/XHTML/CSS & 技术 08 Oct 2007 01:50 pm
前端开发工程师的工具箱 2007-09-25
来自TAOBAO的UED推荐
http://docs.google.com/Present?docid=dgr8f7vc_46gmggrv&fs=true
Google Presentation 目前的功能相比PowerPoint还很简单，只能插入图片和文本，不支持动画。但相信这些功能很快就会出现。
creasemonkey
fiddle
Internet Explorer Developer Toolbar
ie7pro
firebug
yslow
web develop
HTML/XHTML/CSS & 技术 16 Apr 2007 01:11 pm
li标签的间距问题
- body{font-size:12px;margin:0}
- ul{list-style:none;margin:0;padding:0;}
- ul li{background:green;height:20px;width:120px;vertical-align: bottom;}
- ul li a{color:#fff;padding:0 0 0 10px;}
1.解决li在IE5下产生空白行距的方法：如果li定义了宽度，那么需要在li里面再定义vertical-align: bottom;
2.宽度最好不要定义在UL，定义在LI或者UL外层的DIV里面
3. 书写LI的最佳方式，li里面要书写高度和宽度，以及vertical-align: bottom;（for ie5/win bug），或者在ul外面加上一层div，并定义宽度，那么在li里面不用定义宽度和vertical-align: bottom;，也显示正常(IE5下不会产生空白行距)，不过高度还是要定义一下的。
HTML/XHTML/CSS & 技术 10 Apr 2007 10:34 am
css display属性小记
visibility属性用来确定元素是显示还是隐藏，这用visibility=”visible|hidden”来表示，visible表示显示，hidden表示隐藏。
当visibility被设置为”hidden”的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
table的display为’table’时在ie下会出错，ff下没事，干脆显示时用display=”;
HTML/XHTML/CSS & JavaScript/DOM/XML & 技术 15 Dec 2006 11:17 am
统一textarea在IE、Firefox下的效果
textarea在IE是默认有滚动条的，而FF没有滚动条的。
解决方法:
1、用textarea的宽度（widht）和高度（height）来定义textarea的大小；
2、让滚动条自适应：overflow-y:auto。
3、使用js来自适应高度
- <style type="text/css">
- #content {
- font-size: 12px;
- overflow:hidden;
- background-color: #fff;
- color: #000;
- padding-right:5px;
- padding-left:5px;
- font-family: courier;
- width:100px;
- letter-spacing:0;
- line-height:12px;
- border-style:1px #ccc solid;
- }
- </style>
- <script language="JavaScript">
- function setRows() {
- var textarea = document.getElementById("content");
- var cols = textarea.cols;
- var str = textarea.value;
- // windows - replace \r\n
- // mac - replace just \r
- // linux - is just \n
- str = str.replace(/\r\n?/, "\n");
- var lines = 2;
- var chars = 0;
- for (i = 0; i < str.length; i++) {
- var c = str.charAt(i);
- chars++;
- if (c == "\n" || chars == cols) {
- lines ++;
- chars = 0;
- }
- }
- textarea.setAttribute("rows", lines);
- textarea.style.height = lines*12 + "px";
- }
- </script>
- <span>test textarea</span><br>
- <textarea id="content" rows="2" cols="10" onkeyup="setRows();"></textarea>
当输入连续字符超出textarea宽度边界时，ie会自动换行，而FF会出现水平滚动条。
解决方法:
1、你可以设 overflow-x:hidden;将超出部分隐藏。
2、使用js，但需考虑手动换行,中英文还有英文单词。
HTML/XHTML/CSS & JavaScript/DOM/XML & 技术 06 Dec 2006 01:44 pm
offsetHeight在ie和ff下的差异
当你的html没设DTD时,设置一个div并包含一张图片，ie的offsetHeight会多出4个象素。
解决方法是去掉img标签后的换行.让
- </img>后紧跟</div>
或者使用js来判断浏览器。
当你设一div width=50px border=1px,ie的offsetHeight和clientHeight分别是50px和48px,ff是52px和50px
HTML/XHTML/CSS & JavaScript/DOM/XML & 技术 05 Dec 2006 01:38 pm
scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
