调整html js css界面笔记整理--不断更新

一、img+文字 在一个div 里面如何居中对齐?

img和文本是两种不同的节点 所以用的方法也不一样
文字主要依靠 父节点的行高来居中
而img需要的是自身的垂直中齐属性
div {line-heiht:25px;height:25px;}
div img {vertical-align:middle;}

例如:
<div id="buttons">
     <img src="ZR04.gif" alt="登录" />
     <img src="ZR05.gif" alt="注册" />
     <a href="#">忘记密码</a>
</div>
这时只要我们给图片加上垂直对齐的属性,后面的文字连接会相应的与图片水平对齐,即: img{     vertical-align:middle;}。当垂直对齐属性为“top”的时候,文字链与图片顶部水平对齐,一次类推。

如果是input与文字链放在一起,在ff和ie7、ie8中文字链都与图片顶部水平对齐,但是在ie6中却是底部对齐,同样我们可以给input添加垂直对齐属性来达到各个浏览器显示效果相同的目的。
 

二、在 IE8 FireFox Chrome CSS 置中解决方法

在 IE8 还没出来之前,都是利用 margin: 0 auto; 的方式来解决 div 置中的问题,但是这在 IE8 并没有发挥作用,无效了,底下在网路上发现两种解法,分享给大家知道:

1. Width:100%
在最外层 div 加入 Width:100% 的属性,程式码如下:

#container {width:100%;}
#centered {width:400px; margin:0 auto;}
2. Text-Align:Center
在 div tag 里面加入 Text-Align:Center,这样 IE8 会侦测到此语法,就会服从 margin:0 auto; 之属性,不过这样内容会被全部至中,如果您有需要将其 div 内容往左边对齐,那就必须在加上语法 Text-Align:left,底下是范例程式码:
#container {text-align:center;}
#centered {width:400px; margin:0 auto;text-align:left;}
IE6,IE7 则是利用下面语法:

#wrap {
  margin: 0px auto; /* firefox */
  *margin: 0px auto; /* ie7 */
  _margin: 0px auto; /* ie6 */
  height:100px;
  width:860px;
  border:5px solid red;   
}

 

三、在Ie8中div的背景如果高度设为auto或者100%的话,背景颜色失效

可以通过添加:overflow:hidden; 进行处理!

 

四、有时候直接使用 background:url(../images/list_c.jpg) 0 6px no-repeat ;无效,必须在css中进行如下拆解
        background-image :url(../images/list_c.jpg);
 background-position:0 6px ;
 background-repeat :no-repeat;

五、CSS强制不换行(white-space:nowrap)IE使用问题 

什么情况下会出现换行:

当元素设置了固定高度,并且文本长度大于标签元素的宽度时,文本会自动换行。

css强制换行使用样式:white-space:nowrap;该样式从效果上是没有浏览器差异,使用该样式后所有文字在ie和firefox下都在一行内显示。但是在IE下使用该属性值后标签元素宽度会被撑大,从而可能导致原来页面布局被破坏。

解决办法:

white-space:nowrap;overflow:hidden;

六、CSS纯数字字母换行 

  1. word-break: break-all; 强制换行
  2. word-wrap: break-word; --按字母换行
  3. white-space:normal;   ---for ie

1,word-break:break-all 例如div宽400px,它的内容就会到400px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
 word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。还有就是如果单词太长的话也会进行分割。

2.元素拥有默认的white-space:normal(自动换行,不换行是white-space:nowrap),IE下特殊处理

3.对table 的td 标签下的元素设置word-wrap:word-break是没有效果的 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章