账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    请问下flex布局怎么让ff兼容呢？
    35
    0

    比如.right-b 这块
    想要的效果就是ul高度超出就出滚动条，chrome下是对的
    但是ff下就造成整个页面出了滚动条改怎么破呢·麻烦各位大大支支招，谢啦

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }

  body,
  html {
    height: 100%;
  }


  .content {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .div1 {
    background-color: aqua;
    width: 400px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .l-t {
    height: 140px;
    background-color: brown;
  }

  .l-b {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .left {
    width: 60px;
    background-color: darkcyan;
  }

  .right {
    width: 340px;
    background-color: chartreuse;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .right-t {
    height: 100px;
    background: forestgreen;
  }

  .right-b {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: darkgoldenrod;
    overflow-y: scroll;
  }

  .div2 {
    background-color: blanchedalmond;
    display: inline-block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .div3 {
    background-color: blueviolet;
    width: 400px;
    height: 100%;
    display: inline-block;
  }

  ul li {
    line-height: 400px;
  }
</style>

<body>
  <div class="content">


    <div class="div1">
      <div class="l-t">
      </div>
      <div class="l-b">
        <div class="left">
        </div>
        <div class="right">
          <div class="right-t"></div>
          <div class="right-b">
            <ul>
              <li>啦啦啦</li>
              <li>一柱擎天</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </div>
</body>

</html>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 魂☆殤 普通会员 1楼

      要让Flex布局在FF浏览器上正常工作，你需要考虑以下几个方面：

      1. 设置 Flex 的 display 属性为 flex 或 flex-direction。Flex 的 display 属性可以让你控制 Flex 布局的布局方式，如 flex wrap、flex grow、flex shrink 等。flex-direction 属性可以让你控制 Flex 布局的左右方向，如 row、column 等。

      ```html

      Element 1
      Element 2

      ```

      1. 使用 Flexbox。Flexbox 是一个用于创建可伸缩的、自定义容器布局的 CSS 属性。你可以使用 flex-direction 属性控制 Flex 布局的左右方向，使用 flex-wrap 属性控制 Flex 布局的行数，使用 justify-content 属性控制 Flex 布局的列数。

      css .container { display:flex; flex-direction:column; justify-content:space-between; }

      1. 为 Flex 元素添加合适的 flex 值。每个 Flex 元素都有一个 flex 值，用于控制其在容器中的位置。你可以使用 flex:0、flex:1、flex:2 等值来设置 Flex 元素的大小和位置。

      css .container { display:flex; flex-direction:column; justify-content:space-between; flex-wrap:wrap; flex-basis:50%; }

      1. 使用 media queries。媒体查询允许你根据设备的屏幕尺寸和方向改变 Flex 布局。你可以使用 media queries 来设置 Flex 布局在不同设备上的行为。

      css @media screen and (max-width:600px) { .container { flex-direction:column; justify-content:space-between; flex-wrap:wrap; } }

      以上就是在FF浏览器上正常工作Flex布局的方法。希望对你有所帮助。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部