前端布局方法与浏览器兼容问题

问题描述

前端布局方法与浏览器兼容问题
我现在的主要问题是前端布局出现浏览器不兼容,还有就是网页布局我不会分版块定义高度,遇到透明的导航条就不会做了

解决方案

其实有很多javascript框架可以做到兼容主流浏览器的主流版本,比如jQuery以及基于它的各种框架(jQuery easyui等等)。

此外还有更先进的bootstrap可以做到响应式布局(兼容各种屏幕尺寸的大小)

当然这些都是框架,前期你应该要熟练掌握div+css布局。这个你可以找相应书籍或者网页模板进行学习。

解决方案二:
你的问题太笼统,如果你打算自己解决,无论用不用现成的框架,起码你要对css本身有理解。
其实核心概念无非就是盒子模型,浮动,流,布局,花几天把基础学学。

解决方案三:
如果是自己代码,那么我们当初就是自己判断浏览器版本,然后再使用不同语法等,尤其IE碎片化厉害,支持起来很痛苦,现在很多第三方库也再逐步淘汰,不再支持一些老版本浏览器。

时间: 2024-09-20 00:18:43

前端布局方法与浏览器兼容问题的相关文章

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机-内核. 多年前我们一直为IE6兼容烦恼,为它没少加

【前端】浏览器兼容问题都有哪些,通常怎么解决浏览器兼容性问题

问题描述 [前端]浏览器兼容问题都有哪些,通常怎么解决浏览器兼容性问题 正在学习前端,看到一个新词叫浏览器兼容性,请问浏览器兼容性问题一般都有哪些呢?通常怎么解决这些问题呢? xiexie~~ 解决方案 感觉可以划分为两个问题吧:1.因为标准在提升老旧的浏览器可能不支持html5和css3导致兼容性问题.解决方式:考虑业务支持环境尽可能的以最低版本浏览器进行Bug测试.2.浏览器内核差异最值得吐槽的是IE浏览器和别的很多浏览器都不一样举个例子: <body> <a href="

Javascript解决常见浏览器兼容问题的12种方法_javascript技巧

如果你不知道原因,不要过于担心,请研究CSS规则并查看这篇文章:使用CSS来修正一切: 20 +常见错误和修复. 如果这些也无效,您可以通过下面列出的12个javascript解决方案修复它,这样您的网页看起来就能跨越所有浏览器了! 在本文中,我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案. 1. 自动匹配高度 自从我们抛弃了基于Table的页面布局后,创建同等高度栏目或内容盒子的视觉效果已然是一个挑战. 1.1 用jQuery设置匹配高度 这个

js在浏览器兼容教程:DOM方法及对象引用

文章简介:js在浏览器兼容教程:DOM方法及对象引用. 1. getElementById [分析说明]先来看一组代码: <!-- input对象访问1 --><input id="id" type="button" value="click me" ōnclick="alert(id.value)"/> 在Firefox中,按钮没反应,在IE中,就可以,因为对于IE来说,一个HTML 元素的 ID 可

两种方法基于jQuery实现IE浏览器兼容placeholder效果

 placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果: 在Chrome( v31.0.1650.63 m).Firefox( v21.0 ).360安全( v6.3 极速模式 )中,输入栏获得焦点后,提示文字并不消失,如图( Chrome ): 获得焦点前: 获得焦点时: 偏偏IE11要搞点特殊: 获得焦点前: 获得焦点时: 也就是说获得焦点时提示的文字会消失. 非现代浏览器( 例如 IE6-IE9 )是不支持p

两种方法基于jQuery实现IE浏览器兼容placeholder效果_jquery

placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果: 在Chrome( v31.0.1650.63 m).Firefox( v21.0 ).360安全( v6.3 极速模式 )中,输入栏获得焦点后,提示文字并不消失,如图( Chrome ): 获得焦点前: 获得焦点时: 偏偏IE11要搞点特殊: 获得焦点前: 获得焦点时: 也就是说获得焦点时提示的文字会消失. 非现代浏览器( 例如 IE6-IE9 )是不支持pl

DIV+CSS中浏览器兼容方法及div+css的使用技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 相信很多的朋友在div+css的页面制作当中都会遇到这个问题,由于IE系列浏览器对于HTML标签和CSS样式表的解释与其他浏览器会有所区别,所以在制作页面的时候经常会出现一些小BUG,和网页错位等现象,下面站长好站为大家讲解一写,在div+css中如何兼容各大浏览器. 首先我们先要检查相应的HTML标签,如果你的标签错误,无论你如何修改CSS

js事件驱动机制 浏览器兼容处理方法_javascript技巧

3.1. 事件是如何产生的 * 第一种情况,用户对网页做了某些操作,比如,点击了一个按钮,产生点击事件. 第二种情况,用户没有对网页做操作,也可能产生事件,比如浏览器已经将整个页面加载完毕,会产生加载完成事件.当事件产生以后,浏览器会查找产生事件的节点有没有绑订相应的事件处理代码.如果有,则调用该代码来处理.如果没有,会继续向上查找父节点,有没有对应的事件处理代码(事件冒泡). 3.2. 绑订事件处理代码 ** 1) 绑订事件处理代码到html标记乊上 比如: <a id="a1"

图片-web前端浏览器兼容问题

问题描述 web前端浏览器兼容问题 为了是网页在各个浏览器中浏览时都可以,写css样式的时候,是不是这一段话全部都要写上 解决方案 使用css3目前是要这样写的,因为有些css3的属性每个浏览器支持的不同,其他的原来怎么写现在还怎么写 解决方案二: 是的,除非你不需要兼容老版本的firefox,webikit核心之类的,老版本的需要加上保留前缀 解决方案三: 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padd