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

淡淡的烟草味﹌ 2022-07-11 15:35 128阅读 0赞

**一、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`是没有效果的