主页 / 问题 / 678638
Accepted
HamSter
Asked:2020-06-13 15:20:57 +0000 UTC2020-06-13 15:20:57 +0000 UTC

stackoverflow布局，flex换成inline-block

  • 772

我注意到stackoverflow的布局是使用flex的

标题菜单示例：

.so-header .-main {
    height: 100%;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-align-items: center;
    align-items: center;
}

在此处输入图像描述

在 ie9 中（以及我在其他旧版本浏览器中的理解）它flex被inline-block内置样式替换，显然是 js。

标题中相同菜单的示例，但对于 ie 9：

在此处输入图像描述

我没有看到使用现代化工具。

问题：这个怎么用js实现（设置哪些浏览器设置哪些样式），因为这个几乎都是用css？

javascript

3 个回答

  1. Best Answer

    选择源代码表明，在这种情况下，一切都相当原始且 kostylnenko

    // https://cdn.sstatic.net/Js/full.ru.js?v=b200a9ef1cb2, line 2 lol
"init": function() {
    // ...
    if (StackExchange.options.user.canSeeNewHeaderDesign) {
        var e = document.body.style;
        "justifyContent" in e || "WebkitJustifyContent" in e || $(".so-header *:visible").css({
            "display": "inline-block",
            "white-space": "nowrap",
            "vertical-align": "middle"
        }).not(".-logo, .-logo *, svg, .-badges *").css("width", "auto");
        // ...
    }
}
    • 4

  2. 这不仅可以借助于它来实现js，例如yandex它有一个服务（http://phd.yandex.net/detect）可以通过它找出一般使用哪个浏览器和什么类型的设备，然后你可以立即连接其他样式，脚本和模板.

    这是一个示例代码，我在其中对移动设备进行了检查，但您可以对所需的设备进行相同的检查。

    $_SESSION['is_mobile'] = false;

$query = http_build_query(
        array(
            'user-agent' => $_SERVER['HTTP_USER_AGENT'],
        )
);
// TODO chenge sesion to config
$ctx = stream_context_create(array('http' =>
    array(
        'timeout' => 1 // 30 sec
    )
));
$res = file_get_contents('http://phd.yandex.net/detect' . '?' . $query, null, $ctx);
$s = $res;
$s = <<<END
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
{$s}
</root>
END; //уберите пробелы с начало этой строки кода скопируете код у вас

$xml = simplexml_load_string($s);
$error = $xml->{'yandex-mobile-info-error'};
//если тип устройства определить не удалось - возвращаем пусткю строку
$is_ipad = $_SERVER['HTTP_USER_AGENT'];
$is_ipad = explode('iPad', $is_ipad);
$_SESSION['mobile'] = false;
if ($res && $error != 'Unknown user agent and wap profile' || count($is_ipad) == 2) {
    $_SESSION['mobile'] = true;        
}
else {
    $_SESSION['mobile'] = false;
    $_SESSION['is_mobile'] = false;
}
    • 2

  3. 似乎给出了答案，但我会再展示一种没有 JS 的方法。因此，Flexbox 从 IE 10 开始就可以工作，条件注释可以工作到 IE9。float在主样式文件之后，包括 c和/或styles inline-block：
    <!--[if lte IE 9]><link rel="stylesheet" href="/css/ie.css"><![endif]-->

    • 0

相关问题