精华内容
下载资源
问答
  • 大哥们 小弟最近做一个文件上传 并在页面上展示, 图片显示做完了 现在就视频这个在页面上播放不了 找了好些资料, 各种不兼容, 现在ie用WMP可以 但是谷歌上却显示不了 有没有兼容性的播放器 给介绍下 最好详细点,...
  • 在火狐上的DIV格的宽高设置是: width:1003Px height:5px; 然后在Ie6上height就是20px,只能往大的加,不能减。(height:30px;可以 height:5px;就不行了20px往下一个像素都不能缩小)
  • 网页兼容性

    2019-03-01 07:18:13
    检测是否有这个标签, 如没有则自己定义一个标签,但要注意自定义标签默认是内联元素,没有宽和高现在有成熟的js插件可以解决这个兼容性问题 <script> document.createElement("header"); document....

    记录IE67下常见的问题

    1、H5标签兼容

    H5的新加入的标签在IE67下无用
    解决办法:检测是否有这个标签, 如没有则自己定义一个标签,但要注意自定义标签默认是内联元素,没有宽和高
    现在有成熟的js插件可以解决这个兼容性问题

     <script>
            document.createElement("header");
            document.createElement("section");
            document.createElement("footer");
        </script>
        <style>
            header{
                width: 200px;
                height: 200px;
                display: block;
                background-color: red;
            }
            section{
                width: 150px;
                height: 150px;
                display: block;
                background-color: yellow;
            }
            footer{
                width: 100px;
                height: 100px;
                display: block;
                background-color: blue;
            }
        </style>
    <body>
    <header>header</header>
    <section>section</section>
    <footer>footer</footer>
    </body>
    复制代码

    2、元素浮动之后

    能设置宽度的话就给元素加宽度,如果需要宽度把内容撑开,就给它里面的块元素加上浮动,外层元素清除浮动(overflow:hidden;)清除浮动后外层元素就会有高度
    在IE中:浮动元素中增加块元素,两个元素会变成两行
    原因:浮动和块元素的display:block冲突
    解决方案:块元素中加入float属性,使其浮动

    3、第一块元素浮动,第二块元素加margin值等于第一块元素的宽度

    IE6中会有间隙问题
    解决方案:第二块也用浮动进行布局

    4、IE6下子元素超过父级宽高,会把父级的宽高撑开

    其他浏览器中,父级会包不住子元素
    解决方案:不建议子元素的宽高超过父级

    5、p包含块元素的嵌套规则

    在其他浏览器中,不允许p包含div元素
    p、td、h1~n 标签不能嵌套块元素

    6、margin兼容性

    margin-top会传递
    上下margin叠压
    margin-top解决方案:触发BFC和haslayout(overflow:hidden;zoom:1;)
    上下margin叠压:触发条件:同级元素有margin时,上下元素的margin-bottom和margin-top会叠压。
    解决方案:避免触发条件,改用同一方向的margin,如都设置margin-bottom。

    BFC:块格式化上下文(Block Formatting Context,BFC)
    是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
    块格式化上下文对浮动定位(参见 float)与清除浮动(参见
    clear)都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠(Margin
    collapsing)也只会发生在属于同一BFC的块级元素之间。


    转载于:https://juejin.im/post/5c78dc726fb9a049aa6fc930

    展开全文
  • 网页兼容性调试

    2016-07-12 14:27:00
    网页兼容性调试-流程 写作规范高质量的代码出兼容性问题的可能性较小。所以出了问题要考虑是否代码结构不规范 兼容性问题两大原因:不同分辨率下的兼容性调试不同浏览器下的兼容性调试 显示器分辨率和浏览器市场...

    网页兼容性调试-流程

    写作规范高质量的代码出兼容性问题的可能性较小。所以出了问题要考虑是否代码结构不规范

    兼容性问题两大原因:
    不同分辨率下的兼容性调试
    不同浏览器下的兼容性调试

    显示器分辨率和浏览器市场份额
    http://tongji.baidu.com/data/browser

    QQ同时在线人数和分布
    http://im.qq.com/online/index.shtml

    浏览器分类

    国际品牌浏览器
    IE:ie6 7 8 9 10 11
    chrom
    firefox
    safari
    opera

    国产山寨牌浏览器
    360:安全版,极速版
    搜狗:兼容版,高速版
    猎豹:兼容版,高速版
    遨游
    QQ
    taobao
    百度。。。

    浏览器内核
    webkit(Bink):chrom,opera,safari,山寨牌所有极速版浏览器(应用最广)
    Trident:ie浏览器,山寨牌所有兼容版浏览器
    Gecko:firefox

    网页兼容性调试流程

    注意:网页必须有文档申明,否则容易出现兼容性问题 ,尤其是IE

    前提:网页必须在高级浏览器下制作,例如chrome,
    开发网页时候,尽量固定页面宽度(960px,980px(推荐),1000px,1200px....)
    (如果不固定页面宽度(弹性布局/响应式布局需要专门设计),当页面内容复杂时,不同分辨率下布局会错位)
    网页制作完成后:

    1:chrome下兼容性调试
    不同分辨率下兼容性调试
    1:自己电脑分辨率下网页兼容性
    2:比我电脑更小的分辨率下调试
    缩小浏览器宽度高度来模拟低分辨率情况
    如果变形,需要给元素设置固定宽、高、边距等样式
    3:比我电脑更大的分辨率下调试
    缩小浏览器上的网页近似模拟高分辨率情况
    注意:只是近似模拟,不是完全相同
    调试结果仅用于测试网页超大背景颜色和图片、网页模块的居中布局情况
    (缩小页面调试完成后记得回复页面比例:ctrl+0)

    2:其他浏览器下兼容性调试
    所谓其他浏览器,狭义指的就是 ie6,ie7,
    1:使用chrome制作网页
    2:使用ie查看网页
    先用本系统自带ie查看网页
    再按ie f12,切换ie不同版本查看网页(注意ie7)
    再使用ietester软件,模拟ie6查看网页
    (下面步骤根据需要可做可不做)
    如有必要,本机安装虚拟机(virtualPC),安装xp系统,使用内置ie6调试网页
    如有必要,再使用其他浏览器(国际、山寨)调试网页。
    3:使用chrom做移动端调试

    转载于:https://www.cnblogs.com/lyp123/p/5663413.html

    展开全文
  • IETester 包含 IE 5.5 IE6 IE7 IE8 IE9 的IE各版本兼容性测试,网页开发必备
  • 文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。 IFrame对于网页兼容性模式不高于嵌入的页面的兼容性模式。 因此当...

    文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。

    IFrame对于网页的兼容性模式不高于嵌入的页面的兼容性模式。

    因此当IFrame里的页面内容使用了高于被嵌入的页面的兼容模式,实际运行时,还是使用得被嵌入的网页的兼容性模式。

     

    指定文件兼容性模式:<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

     

    在IIS设置里指定:

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
    <system.webServer>
    <httpProtocol>
    <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=edge,Chrome=1" />
    </customHeaders>
    </httpProtocol>
    </system.webServer>
    </configuration>

    转载于:https://www.cnblogs.com/liguojun/p/4904126.html

    展开全文
  • 互联网时代,人们利用各种设备上网:笔记本电脑、上网本、平板电脑、智能手机,甚至电视机。这些设备的屏幕和问题解决方案都各不相同,因而很难创建一个...继之前发布的18个较强的兼容性网页设计案例后,这次与读者们分

    互联网时代,人们利用各种设备上网:笔记本电脑、上网本、平板电脑、智能手机,甚至电视机。这些设备的屏幕和问题解决方案都各不相同,因而很难创建一个适用于所有这些设备的网站。

    不过,还是有解决方法的。兼容性设计 就是为适应不同尺寸屏幕的整改设计。如果你想创建一个增强网页兼容性的设计,你就需要应用fluid grids,图像以及queries。继之前发布的18个较强的兼容性网页设计案例后,这次与读者们分享的是20个增强网页兼容性设计的实用工具。

    Golden Grid System

    Golden Grid System

    Golden grid system 是为增强网页兼容性设计的折合式grid。他有四个特征:列,跨页,底线,script。

    Lettering.JS

    Lettering.JS

    这是jQuery针对基本网页文字处理技巧的一个插件。Lettering.js,拥有如下功能:字距调整型字体、编辑创意设计、可管理代码,用户完全可以简单操控。

    FitText

    FitText

    FitText可随意调整字体大小。这款插件可以使兼容性网页页面布局突出大标题,主次分清。

    Fluid 960 Grid System

    Fluid 960 Grid System

    Fluid 960 Grid System 的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System:传承了MooTools和jQuery JavaScript libraries的效果。

    Gridless

    Gridless

    Gridless可使用户轻松应对兼容性网站。它是以HTML5和CSS3代码为首选的优先兼容手机的插件,且支持文字处理佳的跨浏览器网页。

    Skeleton

    Skeleton

    Skeleton 是一个小的CSS & JS文件集,可以让用户迅速设计好网页:无论什么尺寸的屏幕,看起来都很不错,比如17寸的笔记本电脑屏幕或者iPhone。

    Responsive Design Testing

    Responsive Design Testing

    只要输入这个网页地址,就可以测试任何尺寸的浏览器。

    PX to EM

    PX to EM

    这是一个为用户设置EM字体量身定制的计算工具。用户只要选中相应的PX字体,就可以即时转化为相应的EM大小的字体。

    BluCSS

    BluCSS

    BluCSS是一个使用简便且易记的CSS framework。当用户进行下一个项目设计时,不必担心之前必要设计元素的遗漏。

    Seamless Responsive Photo Grid

    Seamless Responsive Photo Grid

    假设用户想在网页上同时展示很多图片,而且要求图片间无缝连接。 Seamless就可以做到。详情请进本站。

    SimpleGrid

    SimpleGrid

    SimpleGrid 针对的是4个尺寸的屏幕:720像素,大于720像素,大于985像素,大于1235像素。这就是说当用户访问网页时,页面大小会自动切换到其各自浏览器窗口的大小。SimpleGrid带你告别横向滚动条。

    Adapt.js

    Adapt.js

    Adapt.js是一个缩小为826字节的JavaScript文件,用于选定浏览器运行页面前要加载的CSS文件。如果要使浏览器tilt或者重新调制大小,Adapt.js 会在必要时仅仅检查屏幕宽度,提供必要的CSS。

    Fluid Images

    Fluid Images

    在这里,你会找到很多与fluid images有关的实用信息和模范代码。

    Convert a Menu to a Dropdown for Small Screens

    Convert a Menu to a Dropdown for Small Screens

    当浏览器窗口很窄时,右上方的菜单栏会从常规的连接行转变为下拉式菜单。具体方法,详见本站。

    resizeMyBrowser

    resizeMyBrowser

    resizeMyBrowser是一款测试兼容性网页设计的完美工具,让用户轻松重置浏览器大小,一站式体验时下最流行的尺寸或者个性化定制。

    Responsive Table

    Responsive Table

    所谓兼容性设计就是为适应不同尺寸屏幕而进行的整改设计。同时数据表足够宽,用户绝对可以找到理想的问题解决方案。

    Columnal

    Columnal

    Columnal CSS grid system 混合了标准代码和个性化代码。这款grid system部分代码借鉴于cssgrid.net,还有些代码灵感则来自于960.gs 。Columnal使兼容性网页设计更加简便。虽然它的屏幕宽度是1140像素,但是因为采取了fluid设计,所以Columnal可以兼容大部分浏览 器的宽度。

    1140 CSS Grid

    1140 CSS Grid

    1140尺寸的 grid与1280尺寸的显示器完美匹配。如果显示器再小点,就会呈现fluid grid且会自动调节为浏览器的宽度。另外1140 grid应用了media queries以支持移动浏览器,这样可以将所有信息列同时置顶,保证了信息的可读性。

    Mobilize.js

    Mobilize.js

    HTML5 和Javascript framework可使网页实现移动化。网页开发者通过Mobilize.js可将现有网页创建为移动式网页,且自动检测移动浏览器,同时还支持 iPhone, Android, Blackberry, Opera Mini等很多其他浏览器及设备。

    Adaptive Images

    Adaptive Images

    Adaptive Images可将小图像传输到小型移动设备上。它的嵌入式解决方案会自动创建、捕捉、传输设备偏好版图片,而不需要额外改动图像。

    原文地址:http://blog.jobbole.com/5788/

    展开全文
  • 网页兼容性问题

    2014-07-21 10:28:22
    做WEB前端开发的,估计都会遇到浏览器兼容性问题,如果各种调整样式还是不行,试试下面的方法 在页面head 添加 &lt; meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /&...
  • 13个网页页面浏览器兼容性工具 网页设计兼容性测试工具
  • 网页兼容性测试工具

    2012-07-26 10:29:34
    网站开发 经常会遇到不同浏览器的兼容问题 这个工作可以帮你测试更多浏览器兼容问题不用一一去下周那些浏览器的
  • 分辨率网页兼容性

    2016-09-22 14:33:00
    body放到一个css中 .body{ margin: 10px auto; min-width: 780px; max-width: 1350px; max-height: 60px; } 转载于:https://www.cnblogs.com/wujixing/p/5896227.ht...
  • 网页问题解决方案,内容详细!兼容IE6 ff 等
  • 文章目录浏览器介绍兼容性说明常见问题默认样式问题描述解决方法IE6 margin bug问题描述解决方法IE6 和 IE7 默认行高问题描述解决方法图片标签默认间距问题描述解决方法透明度属性问题描述解决方法盒模型问题描述...
  • 网页设计浏览器兼容性测试软件,IE5,6,7,8,9
  •  在微信内置浏览器里面,默认的alert,confirm是会连着网页的域名一起弹出在页面上的,解决办法如下:  window.confirm = function (message) {  var iframe = document.createElement("IFRAME");  ...
  • 兼容性好的网页选项卡效果 适合自定义选项卡 适用于各种浏览器
  • 网页样式的兼容性设计60分钟 重点 网页样式的兼容性设计 难点 网页样式的兼容性设计 备注 上机操作90分钟 / 18 1 / 18 2 知识技能目标 熟悉常见浏览器及其特点 掌握网页样式的兼容性设计方法 / 18 3 3.5.1 任务分析...
  • 网页兼容性测试

    千次阅读 2011-11-03 20:35:08
    》检查浏览器之间的兼容性 根据客户使用的各种浏览器产品及版本,测试网页的显示效果是否一般,根据国内情况,一般只要求保证IE和Firefox 兼容即可。目前,Firefox一般为Firefox 3.5 IE一般要求从IE6.0到IE8.0即可...
  • 此文档适合软件测试初级人员查看,是有关于兼容性工具和网页性能监测软件使用。
  • 手机端网页兼容性指南

    千次阅读 2018-09-29 00:06:32
    毫无疑问,随着微信的崛起,移动端网页开发又进一步,需求量不断攀升。但是智能手机市场的丰富多彩,百花齐放,导致移动端的网页开发和传统的 PC 端网页开发有所不同。 很多人可能正迈向手机端网页开发,但又听说...
  • 每天在回顾浏览ThemeForest上的模板的时候,我都会测试验证浏览器的兼容-更不用说我自己的工作。随着时间的推移,我已经收集到了网上最好的验证和浏览器兼容性测试的工具。以下是我最爱的。
  • 网页兼容性调好了么?↓↓↓转自:@Internet-Explorer
  • 网页兼容性注意事项

    2016-11-17 16:16:00
    滚动页面,注意在小屏电脑上,高度变小,宽度变小后,显示是否正常; 转载于:https://www.cnblogs.com/Tpf386/p/6074243.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,319
精华内容 2,527
关键字:

兼容性网页