`
accpxudajian
  • 浏览: 458705 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

浏览器兼容的text-align写法

    博客分类：
  • CSS
 
阅读更多

 

<html>
<head>	

<style>
	html,body{
		text-align: -moz-center !important;/*ff的样式*/
		text-align:center;/*IE的样式，而且和上边ff的样式的顺序不能调换，否则IE样式失效*/
	}
	
	.magixBoxCon{
		height:200px;
		width:300px;
		border:1px solid red;
		text-align:center;/*IE*/
		margin:0 auto;/*chrome的要求*/
	}
	p{
		text-align:left;
		width:600px;
		margin:0 auto;/*chrome的要求*/
	}
</style>
</head>
<body>
	<p>
		要给id="target"的div实现在IE，ff,chrome下的text-align兼容，需要注意一下几点:<br/>
		1、包含target的容器元素样式：text-align: -moz-center !important; 这个是火狐下的居中样式，而IE下的样式则是标准的：text-align:center;
			特别注意的是，这两个样式的前后顺序不能调换，否则的话IE的居中样式则丢失，变成左对齐。<br/>
		2、要在chrome下看到target居中，还要做的一个工作就是给target本身添加一个样式：margin:0 auto,就是左右的margin使用auto；这个是chrome最特殊的地方
			(还有得网友说，必须给target本身添加widht属性，但是我测试了，不加也没关系)
	</p>
	<div id="target" class="magixBoxCon">内容居中</div>
</body>
</html>
分享到：
| EasyTip 简单Tip提示窗口
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    浏览器兼容性解决方法

    ### 浏览器兼容性解决方法：深入解析与实践技巧 在Web开发中，确保网站在不同浏览器上表现一致是一项挑战。本篇文章将基于提供的文件信息，深入探讨浏览器兼容性的解决方法，尤其针对Firefox、IE等主流浏览器进行...

    jsp浏览器的兼容性

    浏览器兼容性解决方案 在 Web 开发中，浏览器兼容性是一个常见的问题，对于 JSP 开发人员来说尤其重要。本文档旨在帮助 JSP 开发人员解决浏览器之间的兼容性问题，提出解决方法，涵盖 Firefox、谷歌、百度和 IE6/7/...

    各浏览器兼容问题

    ### 各浏览器兼容问题 #### 知识点一：浏览器渲染模式与X-UA-Compatible - **X-UA-Compatible**：此元标签用于控制IE浏览器的渲染引擎。例如： ```html &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; ...

    css 跨浏览器实现float-center.docx

    总结来说，实现`float:center`需要巧妙地结合`position:relative`、`left`、`right`属性，并注意浏览器兼容性和盒模型一致性。同时，理解并掌握CSS布局、浮动和定位原理对于任何前端开发者来说都是非常基础且必要的...

    最新web面试题css浏览器的兼容性问题.docx

    在Web开发中，CSS浏览器兼容性问题是一个常见且棘手的话题。不同的浏览器，尤其是IE系列与其他现代浏览器（如Firefox、Chrome、Safari和Opera），在解析CSS规则时可能存在差异，导致页面显示效果不一致。以下是一些...

    CSS的box-align属性控制子元素布局实例

    因此，当处理跨浏览器兼容性问题时，开发者可能需要使用JavaScript库或渐进增强技术来确保在所有平台上的一致性表现。随着现代浏览器对Flexbox布局的广泛支持，使用`align-items`和`justify-content`代替`box-align`...

    div+css布局时的浏览器兼容问题

    ### div+css布局时的浏览器兼容问题 在Web开发领域，使用div+css进行页面布局是一种常见的技术手段。然而，在实际应用过程中，由于不同浏览器（如IE、Firefox、Chrome等）对CSS的支持程度存在差异，导致同一份CSS...

    浏览器兼容问题汇总v1.0

    ### 浏览器兼容问题汇总知识点详解 #### 一、清除浮动 在网页布局中，当元素使用浮动（float）时，会导致该元素脱离正常的文档流，从而可能对其后的元素布局造成不可预料的影响。为了解决这个问题，通常会在包含...

    让IE和火狐同时兼容

    特别是在早期的Web时代，Internet Explorer（简称IE）与Mozilla Firefox（简称火狐）这两款浏览器之间存在着显著的差异，这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

    图片垂直居中的代码的几种方法

    在网页设计中，图片的垂直居中是一个常见的需求，...以上四种方法各有优劣，选择哪种取决于具体的项目需求、浏览器兼容性和个人偏好。在实际开发中，理解并灵活运用这些技术，将有助于创建更美观、更响应式的网页设计。

    css兼容性详解

    ### CSS兼容性详解 #### 一、CSS Hack技术 **CSS Hack**是一种针对不同浏览器或...通过以上介绍的方法和技术，开发者可以有效地解决CSS在不同浏览器间的兼容性问题，确保网站在各种环境中都能提供良好的用户体验。

    原生js，复习，面试题

    7. 常见浏览器兼容问题和解决办法 包括 IE8 中图片放在 a 标签中会显示蓝色边框、IE8 中背景复合属性写法问题、IE6 及更早浏览器中定义小高度的容器、IE6 及更早浏览器浮动时产生双倍边距的 BUG 等问题。解决方案...

    在IE与FF中如何居中的css写法

    在IE中，一个常用的传统方法是利用`text-align:center;`属性。这个属性适用于块级元素，比如`&lt;body&gt;`标签，可以将其中的所有内联元素（如文本）居中对齐。例如： ```html &lt;body style="text-align:center;"&gt; &lt;!-- ...

    CSS里的各种水平垂直居中基础写法心得总结

    需要注意的是，这种方法可能在某些浏览器中不兼容。 3. 使用Flexbox布局。这是一个非常强大的布局方式，可以很容易地实现水平和垂直居中。要使用Flexbox实现居中，需要将父元素的display属性设置为flex，然后通过...

    ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)

    但是值得注意的是官方介绍中已明确表态说这个插件不支持ie6,下面将提供多实例化Zero Clipboard复制功能的实现及兼容ie6的写法！ 先下载ZeroClipboard //www.jb51.net/jiaoben/24961.html &lt;style type=text/css&...

    css自适应宽度 多种方法实现宽度自适应的水平居中

    在现代网页设计中，实现内容...前端工程师可以根据不同的浏览器兼容性要求、项目需求以及个人偏好来选择合适的实现方式。这些技巧的运用有助于构建响应式网页布局，让网页在不同设备和浏览器中都能保持良好的显示效果。

    巧用隐藏和负边距实现兼容所有浏览器的ul和li并列效果

    最终效果图如下： （我写两个ul的原因是li只有一排和多排效果会不一样） 首先看我的写法，HTML很简单，就不贴了，只贴CSS代码，DEMO： ul{overflow:hidden;...text-align:center;margin:0 5px 10px;background:

    一个div在浏览器水平居中的实现方法

    在实际应用中，开发者可以根据具体的浏览器兼容性要求和个人喜好选择适合的居中方式。需要注意的是，随着CSS的发展，如Flexbox和Grid等现代布局技术也提供了更为强大和灵活的居中布局方案，值得进一步探索和学习。

Magicbox
Global site tag (gtag.js) - Google Analytics