,

,

和

.此时我们不能定义行内元素的宽度，为了解决这个问题我们可以将行内元素转变为块元素。

　　方法如下：span { width: 150px; display: block }

　　问题三，让固定宽度的页面居中问题

　　网站中CSS为了让页面在浏览器居中显示需要相对定位外层div，然后把margin设置为auto.

　　#wrapper {

　　margin: auto;

　　position: relative;

　　}

　　问题四，图片替换技术问题

　　在web中用文字总比用图片做标题好一些，因为目前的搜索引擎还无法识别图片中的内容，所以网站设计中文字是对屏幕阅读机和SEO都是非常友好的。

　　HTML示例:

　　

Main heading one

CSS:

　　h1 { background: url(heading-image.gif) no-repeat; }

　　h1 span {

　　position:absolute;

　　text-indent: -5000px;

　　}

　　在上面的HTML代码中可以看到我们对标题使用了标准的

作为标签并且用css来将文本替换为图片，text-indent属*将文字推到了浏览器左边5000px处，这样对于浏览者来说就看不见了.

　　问题五，最小宽度的问题

　　网站设计中IE6浏览器的一个问题就是不支持min-width属*，但是min-width又是相当有用的,特别是对于弹*模板来说，它们有一个100%的宽度，min-width可以告诉浏览器何时就不要再压缩宽度了。除IE6外其他的浏览器只需要一个min-width: Xpx;例如：

　　.container {

　　min-width:300px;

　　}

　　为了让他在IE6下工作, 我们需要一些额外的工作.如开始的时候我们需要创建两个div,一个包含另一个，做法示例如下：

　　

　　

Content

　　

　　然后我们需要定义外层div的min-width属*，如：

　　.container {

　　min-width:300px;

　　}

　　这时候我们需要包含如下的代码：

　　* html .container {

　　border-right: 300px solid #FFF;

　　}

　　* html .holder {

　　display: inline-block;

　　position: relative;

　　margin-right: -300px;

　　}

　　问题六，隐藏水平滚动条问题

　　网站设计中CSS为了避免出现水平滚动条，在body里加入overflow-x:hidden .

　　body { overflow-x: hidden; }

　　当你决定使用一个比浏览器窗口大的图片或者flash时,这个技巧将非常有用。