精华内容
下载资源
问答
  • 朋友给我发了个文件包,让我看看里面的弹出遮罩层在IE下显示是正常的,但在Firefox等浏览器下弹出一下之后就消失了。 效果如下图,一个遮罩的效果,在Firefox里白色的遮罩DIV很快又消失。 第一反应是是浏览器兼容性...

    朋友给我发了个文件包,让我看看里面的弹出遮罩层在IE下显示是正常的,但在Firefox等浏览器下弹出一下之后就消失了。

    效果如下图,一个遮罩的效果,在Firefox里白色的遮罩DIV很快又消失。

    7PJKG}G6UJILTL5NJG1`3QO

    第一反应是是浏览器兼容性问题。找到DIV样式里有filter以为是这个问题,找了一下在非IE下用opacity来解决,可是在其代码里已经有了opacity的定义。看来应该不是这个问题。立马解决是不太可能了。那就用FireBug一步一步调试吧。还好工具强大,很快就发现问题了。遮罩层在移动的时候样式中的定义属性left与top快速变化,并且top最终的值是负的。看来这是导致问题的原因。JS代码如下:

     
                        this.popupLayer.css({opacity:0.1}).show(400,function(){
                            
    this.popupLayer.animate({
                                left:($(document).width() 
    - this.popupLayer.width())/2,
                                //下面这一句导致的问题
                                top:(document.documentElement.clientHeight - this.popupLayer.height())/2 + $(document).scrollTop(),
                                //top:(document.documentElement.clientHeight - 584)/2 + $(document).scrollTop(),
                                opacity:0.8
                            },
    1000,function(){this.popupLayer.css("opacity",1)}.binding(this));
                        }.binding(
    this));

    使用Alert显示各JS获取的属性在不同浏览器里的数值。

    image

    先手动修改了个固定的高度。OK,显示正常。看来找到问题的解决办法之后,在JS执行的方法开头先设置对像高度。这样就在同的浏览器里实现了兼容。

    this.popupLayer.height(584);

     

    网上找的关于高度解析差异的说明

    对高度的解析
    IE:将根据内容的高度变化,包括未定义高度的图片内容,即使定义了高度,当内容超过高度时,将使用实际高度
    Firefox:没有定义高度时,如果内容中包括了图片内容,MF的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的情况;当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。
    结论:大家在可以确定内容高度的情况下最好定义高度,如果真的没有办法定义高度,最好不用使用边框样式,否则样式肯定会出现混乱!

     

    本文没有什么技术含量,供大家参考参考!

    转载于:https://www.cnblogs.com/cbcye/archive/2011/05/13/2045625.html

    展开全文
  • 分析问题我们看看代码是什么原因造成文字显示不完呢?看到CSS里面写了高度和overflow超出隐藏。是不是高度去掉就不隐藏了,没错,我们去掉看看!去掉后的确文字显示完整了,但是下面怎么错位了?企业价值观为什么不...

    4191b39ccc28c7bce71b50931568b13d.gif

    74187d9f55124487f1f5dd10464d94fa.png

    先看bug是什么

    1c13ef94ca49ccb12ebdc90c36d674f5.png

    如上图是一个一行两个的列表,箭头所指的位置其实还有文字没有显示完就被隐藏掉了。

    客户的要求是让字显示完,别隐藏!

    ca5a88f121734a23e8663589a03274ed.png

    分析问题

    我们看看代码是什么原因造成文字显示不完呢?

    486a1ee3f68442e421b64fcfa0def0cb.png

    看到CSS里面写了高度和overflow超出隐藏。

    是不是高度去掉就不隐藏了,没错,我们去掉看看!

    b1539a99721555ea9a10a662ae31f0a2.png

    去掉后的确文字显示完整了,但是下面怎么错位了?

    企业价值观为什么不在左边了,怎么跑右边了?

    d12603158daa5f5b7a941e7377cee931.png

    客户说5bc7fac7c75a77c5ad82dbd79109af31.png这可不行呀,文字显示全了也要对齐呀!

    这就是css神奇的地方,你解决一个问题,会出现第二个,第三个问题。

    所以解决问题一定分析周全,确保万无一失。

    ca5a88f121734a23e8663589a03274ed.png

    问题分析

    所以这个问题我们要解决的是?

    1. 文字自适应高度,不能写死高度显示字符显示

    2. 还要能对齐,高度不统一怎么对齐

    列表造成错位的原因是因为float:left; 元素都左浮动,

    如果第一行元素高度太高,第二行的元素就过不去了,被卡住了。

    那怎么办呢?

    既然问题出在浮动,那是不是不浮动不就解决了?

    答对了一半!

    ca5a88f121734a23e8663589a03274ed.png

    问题解决

    经过我的深入分析。

    我加了一行代码完美解决这个问题!

    先看看效果!

    487aa650a448969c8f2a1ebc99eee15e.png

    如上图,文字显示完整了,第二行也对齐了。

    我们文字加多点看看效果如何:

    75baa3fa01129a7b0d419faa33c2c0bc.png

    哇,文字这么多也不错位了,高度真的自适应了!

    完美解决!

    怎么实现的呢?

    ca5a88f121734a23e8663589a03274ed.png

    解决方法

    在第三个元素上面的li上,也就是在下一行的第一个元素上面 加一行CSS:

    .ul-list li:nth-child(3){ clear:both; }

    解决了!

    选择性的不浮动!

    如果你的列表内容非常多,可以选择每一行的第一个

    .ul-list li:nth-child(2n+1){ clear:both; }

    响应式的时候可以这样写,每行从3个变2个的时候

    @media only screen and (max-width: 750px){    /* 750以下的时候显示两个 */    .ul-list li{width: 50%;}  .ul-list li:nth-child(3n+1){    clear:none;  }    .ul-list li:nth-child(2n+1){    clear:left;  }}

    你学会了吗?

    a1d5f5f5870e54dbe949d51139f81fbd.png

    展开全文
  • 为了解决浮动元素引起父元素无法获得高度问题,我们一般在子元素的最后加上一个Spacer Div(clear:both)。但是IE和Mozilla对div的解释不同引起一些表现上的差异。 在制作网页的过程中,自适应问题是经常遇到,而...
  • 了网上相关问题很多的方案,都把我遇到这个复杂的问题单独分开说了,不显示的单个用了网上的确实可行 但是没有自适应高度 ,因为它是把子view的最大高度设置给viewpager了,另外自适应处理是在new Fragment的...

    看了网上相关问题很多的方案,都把我遇到这个复杂的问题单独分开说了,不显示的单个用了网上的确实可行 但是没有自适应高度 ,因为它是把子view的最大高度设置给viewpager了,另外看自适应处理是在new Fragment的时候 把rootView(不为null)键值形式关联到自定义的viewpager中;单个的是可以的,不清楚是我操作的问题还是代码如此;所以我就给出在viewpager设置adapter的时候绑定了fragment列表,所以我就在viewpager中根据adapter获取当前显示的view 得到高度 并设置给viewpager ;
    示例关键代码:(VpFragmentAdapter是viewpager的适配器)

    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            int height = 0;
            VpFragmentAdapter vpFragmentAdapter = (VpFragmentAdapter) getAdapter();
            if (vpFragmentAdapter != null) {
                View child = vpFragmentAdapter.getItem(getCurrentItem()).getView();
                if (child != null) {
                    LogUtil.e("viewpager="+getCurrentItem());
                    child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
                    height = child.getMeasuredHeight();
                }
            }
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    
    

    我这边测试时可行的,如果使用类似方法有问题的欢迎评论,谢谢

    展开全文
  • 在实际开发中,我们很多时候都需要获取控件高度,因为不同的手机厂商设计的手机屏幕大小不一,不由得让我们去手动适配屏幕。然而网上关于获取控件高度的方法一大堆,我这个方法也不是唯一方法。 回归正题,我打算用...

    在实际开发中,我们很多时候都需要获取控件高度,因为不同的手机厂商设计的手机屏幕大小不一,不由得让我们去手动适配屏幕。然而网上关于获取控件高度的方法一大堆,我这个方法也不是唯一方法。

    回归正题,我打算用回调的方式来实现控件的宽高,有兴趣的同学可以试试看。

    public class ViewUtil {
        public static void getViewWidth(final View view, final OnViewListener onViewListener) {
            ViewTreeObserver vto2 = view.getViewTreeObserver();
            vto2.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    if (onViewListener != null) {
                        onViewListener.onView(view.getWidth(), view.getHeight());
                    }
                }
            });
        }
    
        public interface OnViewListener {
            void onView(int width, int height);
        }
    }

    以上代码完全可以粘贴复制,不难理解,传入想要获取的控件对象,实现接口或者用匿名对象得到控件的宽高。值得注意的是,这种方法不能在主线程中调用,必须开启子线程完成回调。

     

    展开全文
  • 最近解决了一个很辣手的有关excel问题,才想着要写这篇博客。 我们使用pageoffice控件查看文档,最近客户查看...3、不同excel版本问题 结果试了以后都不是这些原因导致的。后来在网上找原因,发现有可能是电脑d...
  •  在网页设计时,我们往往使用自适应高度,这样起来美观些。在这方面,IE可以让我们不用太操心,而火狐就不行了。因为火狐不会自增长,而IE会自增长。如何解决火狐这个自适应高度问题。下面是相对应的CSS .css...
  • 面试至少有一半是缘分与运气!虽然竭力做到公平公正,但毕竟主管因素太多。 你前面一位面试者表现水平一定会在某种程度上改变面试官对你的评判标准。上午面试官一般心情比较好,而下午因为没午睡可能会对世界...
  • 在我看来这不是recyclerView嵌套recyclerView 一个recyclerView就可以搞定 只是要显示不同的list的数据和不同的item,我的思路是新建一个baseModel 两个数据源的bean 继承于baseModel,还是代码 说是说不清楚...
  • SOA的概念现在已经很普遍了,或者说被业界倏忽的有些“烂”了。...每个厂商或集成商,基于不同看问题视角,不同的知识和经验积累,不同的产品和服务,导致了这些概念的泛滥。 不过,这些概念从不同
  • Div即父容器不根据内容自适应高度,我们下面的代码: 复制代码代码如下: ”main”> ”content”></div> </div> 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容...
  • 除此还有刘海屏,水滴屏,挖孔屏,全面屏,非刘海屏,不同手机状态栏高度又不太一样,需要我们去适配,有一个段子说,如果看到那个手机适配有问题,赶紧把那个手机藏起来,不要让测试发现了。 我们用HBuilder创建的...
  • 首先, 看看js获取元素的高度与jQuery获取元素的高度的区别, 一下以clientHeight和innerHeight测试 1. js获取 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> ...
  • 原文地址:http://community-china.developer.motorola.com/t5/MOTODEV-博客/为何我设计的ListView上去不同/ba-p/1806 发帖人Henry_Yao修改时间12-30-201104:06 PM- 上次编辑时间12-30-201104:06 PM 本...
  • 昨天下载了一个新版本flex 4.1 sdk 包含升级adobe air 2.0 的版本的sdk ,当我换成了这个版本...看看差别究竟在哪里? 但是反而在同学间又没有这样的问题存在,十分究竟。记录一下。 <s:Group> ...
  • div自适应高度

    2010-03-15 15:15:00
    Div即父容器不根据内容自适应高度,我们下面的代码: 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。 我们可以...
  • 使用autolayout自定义动态高度的cell

    千次阅读 2015-09-26 11:21:19
    关于使用autolayout创建...但是我们平常使用的自定义cell很多都是显示不同数量的控件,来显示不同的高度,比如微博首页,饿了么首页那些cell,都是下面显示不同数量的控件来显示不同高度的cell,那么下面就让我们一起
  • EasyUI布局 高度自适应

    2020-11-22 11:58:00
    最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问题。其中一个就是datagrid不能很好的布局。...这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好
  • Div即父容器不根据内容自适应高度,我们下面的代码:  当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。...
  • 让div自动适应高度

    2014-12-31 10:57:48
    我们下面的代码:  当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。  我们可以通过三种方法来解决...
  • DIV自动适应高度

    2009-11-05 12:25:00
    我们下面的代码:<div id="main"><div id="content"></div></div>  当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但...
  • 我们下面的代码:  当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。  我们可以通过三种方法来解决...

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 349
精华内容 139
关键字:

不同高度看问题