问与答

最新推荐文章于 2024-09-14 19:44:09 发布

置顶 jojo28

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量494

点赞数

分类专栏： web市场文章标签： ie javascript stylesheet html div xhtml

本文链接：https://blog.csdn.net/jojo28/article/details/4419469

版权

web市场专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.纯英文禁止换行
word-break:break-all; word-wrap:break-word; overflow:hidden;

2.请教：英文字不会像中文那样自动换行，需要拿什么属性控制呢？
style="table-layout:fixed; word-break:break-all"

3.改变滚动条色彩
overflow-x:hidden; overflow-y:auto;
scrollbar-base-color: GhostWhite;
scrollbar-face-color: #aaa;/*立体滚动条的颜色*/
scrollbar-track-color: #f4f4f4;/*立体滚动条背景颜色*/
scrollbar-arrow-color: #fff; /*,三角箭头的颜色*/
scrollbar-3dlight-color: #aaa; /*立体滚动条亮边的颜色*/
scrollbar-darkshadow-color: #aaa; /*立体滚动条强阴影的颜色*/
scrollbar-highlight-color: #fff; /*图2,滚动条空白部分的颜色*/
scrollbar-shadow-color: #fff;/*立体滚动条阴影的颜色*/

4.让div水平垂直居中
div{ width:1002px; height:590px; position:absolute; left:50%; top:50%; margin-left:-501px; margin-top:-295px;}

5.div高度自动适应
你给html,body{height:100%;}以后其他标签就能用100%了
你给一个div设置高度200
然后给这个div中的2个div设置100%

6.如何让一个图片永远在最前面显示，不被FLASH盖上？
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="527" height="500">
          <param name="movie" value="flash/pic.swf">
          <param name="wmode" value="opaque">
          <param name="quality" value="high">
          <embed src="flash/pic.swf" quality="high" pluginspage=" http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="527" height="500"></embed>
        </object>

7.让IE8以IE7显示
<meta http-equiv="X-UA-Compatible" content="IE=7" />

8.表格边框相邻边被合并
<style type="text/css">

</style>

9.透明度兼容
-moz-opacity:0.5;
filter:alpha(opacity=50);

7、css怎么让英文文本自动换行，IE我搞定了 width:280px;word-break:break-all; ，FF怎么写？？
.pre {
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
}

* html pre {
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space : normal ; /* Internet Explorer 5.5+ */
}

8.英文文字，一个词一行显示不全差几个字母，就让他显示到下一行，用哪个属性呢？
word-break : keep-all
（keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本）

9.如果你在BOX容器里使float和text-align的方向设为一致：
以下是引用片段：
{float:left;text-align:left;margin:0 0 0 200px;}

我们可做如下修改：
以下是引用片段：
{float:left;text-align:left;margin:0 0 0 200px;display:inline;}

10.CSS属性与JavaScript 编码方法对照表
CSS与JS紧密配合，为我们的页面增添了很多别致的效果。在52CSS.com中也有相关的案例。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：JavaScript中style后面的属性应该是什么？

JavaScript CSS Style属性对照表

如：
CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
border 　　 border
border-bottom 　　 borderBottom

11.hack另一方法，能通过W3C标准
1. 除IE外都可识别

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

如：

12.图片能垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">

</style>
<div><p><img src=" http://www.google.com/intl/en/images/logo.gif"/></p></div>

法二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="ziter72@vip.qq.com,QQ:10349591" />
<meta name="description" content="ZiTer72原创图片垂直居中" />
<title>ZiTer72原创图片垂直居中</title>
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px; font-family:Arial, Helvetica, sans-serif;}
div { width:200px; height:200px; margin:100px; border:1px solid #ccc; line-height:200px;display:table; text-align:center;}
div img{ vertical-align:middle;}
div span{ zoom:1;}
</style>
</head>

12.下拉列表浮在弹出成上面了怎么弄啊
你在那个层加一个iframe做背景
在弹出菜单最下面加这个<iframe class="iframe"></iframe>
.iframe{
position:absolute;
border:none;
background:none;
visibility:inherit;
top:0px;
left:0px;
width:120px;
height:500px;
z-index:-1;
filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}

13.就是英文字符在FIREFOX下不自动换行的问题，这个怎么解决？
word-wrap:break-word;
word-break:normal;
这两句，在FF里就有效果了……

再汗下，把宽度加在<P>上不用加那两行都行
把宽度加在试了下a,h1,li,ul,div全没效果，只有在P只有效

刚开始我用这个CSS
p{
width:400px;
word-wrap:break-word;
word-break:normal;
}
有效

2)英文自动换行吗？
word-break:break-all; word-wrap:break-word; overflow:hidden; 加在内容里面及可。

14.关于min不兼容ie6的解决方法
min-height:100px; /*高度最小值设置为：100px*/
height:auto !important; /*兼容FF,IE7也支持 !important标签*/
height:100px; /*兼容ie6*/

页面的最小宽度 min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类, 然后CSS这样设计： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

15.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
ul,li{margin:0; padding:0; list-style:none}
ul{width:330px; border:1px solid #f00}
ul li{width:230px; line-height:22px;height:22px;overflow:hidden; }
ul li a{float:left}
span{ padding-left:10px;position:absolute;}
</style>
<title>test</title>
</head>
<body>
<ul>
<li><a href="#">这是一但是范这是一但是范德这是一但是范德这是一但是范德这是一但是范德德萨</a><span>2008-06-07</span></li>
<li><a href="#">这是一个故事发达省份但是范德萨</a><span>2008-06-07</span></li>
<li><a href="#">这是份但是范是范德萨</a><span>2008-06-07</span></li>
<li><a href="#">这是一范德萨</a><span>2008-06-07</span></li>
<li><a href="#">这是达省份但是范德萨</a><span>2008-06-07</span></li>
<li><a href="#">这是一个故事发达省份但是范德萨</a><span>2008-06-07</span></li>
<li><a href="#">这是一个故事发达是一个故事发是一个故事发省份但是范德萨
</a><span>2008-06-07</span></li>
</ul>
</body>
</html>
</html>

16.是鼠标点上去就有这个虚框，现在要去掉它是吗？
a {outline: none; /* for Forefox */ }
a {star:expression(this.onFocus=this.blur()); /* for Ie*/ }

17.
弹出窗口是固定大小

function popUpBig(URL)
{
var widthCenter = (screen.width－窗口宽度)/2;
var heightCenter = (screen.height－窗口高度)/2;
eval("window.open(URL,'help','toolbar=0,scrollbars=1,status=0,location=0,menubar=0,resizable=1,width=750,height=600,top="+heightCenter+",left="+widthCenter+"')");
}

18.
word-spacing这个是英文文字之间的距离
letter-spacing这个是中文文字之间字的距离

19.如何取select里面的值？用js
<script>
window.onload = function cc(){
var myform = document.forms["myform"];
var myselect = myform.aa
for (var i=0; i<myselect.options.length; i++){
alert(myselect.options[i].text)
}
}

</script>
<body>
<form name="myform">
<select name="aa">
<option>不知道</option>
<option>不知道</option>
<option>不知道</option>
<option>不知道</option>
<option>不知道</option>
</select>
</form>

20.li的内容超出li的宽度后隐藏且IE下后面有省略号
.new_list li a {
width:160px;
display: block;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis; (oprea浏览器的兼容)
text-overflow: ellipsis;(text-overflow 是CSS3里面的内容但IE已经支持)
}
FF需js来实现，如（if(strlen($row['title'])>n)
{
$shorttitle=unhtml(msubstr($row['title'],0,68)).'...'; }）

怎么去图片连接边框的
/*去除链接虚线框*/
a {outline: none; /* for Forefox */ }
a {star:expression(this.onFocus=this.blur()); /* for Ie*/ }

这可是一个链接多个颜色的文字哟
.t{COLOR:#0000cc;TEXT-DECORATION:none}
a.t:hover{TEXT-DECORATION:underline}

1.见过滚动条在左边的网页没
<html xmlns=" http://www.w3.org/1999/xhtml" >
换成这就OK了 <html dir ="rtl" xmlns=" http://www.w3.org/1999/xhtml" >

2.Css实现图片响应鼠标经过变大
Css代码：

. style a:hover {

position: relative;

}

.style a img {

position: static;

width: 80px;

height: 80px;

border: none;