Questions tagged «css»

为了填充整个页面的高度，我使用height: 100%;了html和body标签，并且在关闭浏览器并重新打开之前，它可以正常工作。（由于移动设备上的问题，我不使用100vh https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html） 重现步骤： 在iPhone上的Google Chrome浏览器中打开https://angelika94.github.io/rick/（您会看到导航（Morty和Beer）位于页面底部）的CSS Rick屏幕截图 关闭浏览器并将其从多任务导航中删除：https : //support.apple.com/zh-cn/HT201330 再次打开浏览器（您将看到底部导航移离了“第一个屏幕”，现在您需要滚动才能看到它） css Rick的屏幕快照，不带导航 在以下情况下，页面将自行修复： 更新页面 将设备旋转到横向 通过标签打开和关闭浏览器的导航 关闭并重新打开浏览器，而无需在多任务导航中将其关闭 为什么会发生？如何解决此问题？ 先感谢您！

10 html  css  height  google-chrome-app 

问题背景：我正在使用katex在页面上渲染一些数学。然后，我想创建该页面一部分的PDF版本，因此我创建了一个HTML文档，其中包含要导出的部分，该部分内联所有CSS并将其传递给渲染器。渲染器无法访问节点资源，这就是内联所有内容的原因。除字体外，它运行完美。 我同时尝试了url-loader和bas64-inline-loader，但未内联生成的字体。我在调试器中检查了生成的CSS，并且旧的URL仍然存在，没有字体的data-URL。 这是我当前的webpack.config.js： const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { "editor": './src/editor.js', "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', "json.worker": 'monaco-editor/esm/vs/language/json/json.worker', "css.worker": 'monaco-editor/esm/vs/language/css/css.worker', "html.worker": 'monaco-editor/esm/vs/language/html/html.worker', "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker', }, output: { globalObject: 'self', filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { …

10 javascript  css  webpack  data-uri 

自Chrome v78.0.3904.70发布以来，我发现 CSS属性的使用存在问题white-space: nowrap;。不间断的空格似乎导致换行。使用时text-overflow: ellipsis，实际文本将不会显示，因为它在容器外部被打断了。似乎只有在文本太长而无法显示时才会发生。 .box-inline { max-width: 120px; overflow: hidden; height: 16px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } <div class="mar-rgt box-inline text-sm"><span class="label" style="background: rgb(176, 223, 246);"></span> Not meeting expecations</div> 运行代码段隐藏结果展开摘要 它在我们的应用程序上引起了一些显示问题。这是错误还是我的代码有问题？ 该代码在React 16中呈现。

10 html  css  google-chrome  whitespace 

遵循我的一小段代码。只是想知道为什么“ iphone”单元仅从iphone闪烁。PS。我不能使用表格或列表作为结构。我也尝试使用transform: translate3d(0,0,0);。 基本上，我也需要第一个单元格同时在iPhone和iPad上同时保持Left和Top的粘性。我只想使用HTML和CSS来做到这一点。 重要 请不要回答固定的解决方案，我不知道桌子会放在身体的什么位置。将有一个标题，一些内容等。 显示代码段 .table { width: 2000px; position: relative; } .tr { overflow: visible; display: block; white-space: nowrap; font-size: 0; } .tc { border: 1px solid #DDD; display: inline-block; width: 100px; height: 100px; text-align: center; font-size: 12px; } .trh { background: #000; color: #FFF; position: -webkit-sticky; …

10 html  css 

我们有一个电子商务应用程序，当您进行购买时，该应用程序会发送订单详细信息，而我们只是重新设计了该电子邮件模板。在过去几天中，我们收到了一些客户报告，其中电子邮件中的一半文本丢失。 最终获得屏幕截图后，我们了解到问题是在使用暗模式的iPhone上发生的。到目前为止，他们都是通过Mail应用程序或Safari使用gmail的客户（两者都有相同的问题）。我不确定gmail因素是否相关或偶然。 我们的电子邮件很简单-它具有白色背景，灰色标题和黑色正文。深色模式使白色背景和灰色标题保持不变，但是正文文本从黑色更改为白色。在白色背景上，白色文本显然是不可见的，并且电子邮件看起来缺少大量内容。 有什么措施可以防止黑暗模式将我们的文本从黑色变成白色？ 我应该注意，我们的电子邮件中还嵌入了QR码，因此，我担心的解决方案将使深色模式继续为我们的完整电子邮件重新着色，因为我认为这将使QR码难以识别。 编辑：这与任何应用程序代码均不相关，因此不适用针对黑暗模式开发iOS的准则。这仅是iOS 13上处于黑暗模式下的Apple邮件应用如何显示HTML电子邮件的问题。

10 ios  css  email  gmail  ios-darkmode 

尽管该<meta name="viewport">标签未标准化，但“由于事实上的优势，它被大多数移动浏览器所尊重”。 它不是真正的Web标准的缺点之一是详细的文档不如其他标准提供。该CSS工作组对这个规范，所以这就是我主要用作为权威著作。 我的主要问题是： 以下声明之间的感知区别是什么？ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="initial-scale=1.0"> 或者询问，这两个@viewport CSS规则之间有什么区别： /* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */ @viewport { zoom: 1.0; min-width: extend-to-zoom; max-width: 100vw; } /* Translated from <meta name="viewport" content="initial-scale=1.0"> */ @viewport { zoom: 1.0; min-width: extend-to-zoom; max-width: extend-to-zoom; } 我如何得出这些@viewport译文的： width=device-width 至 …

9 css  viewport  meta-tags  meta 

我有一个包含其他元素的容器元素，但是根据屏幕尺寸的不同，它们的各个部分会被莫名其妙地切除。当调整HTML页面的宽度（通过单击并拖动它）时，您可以在我的代码沙箱链接中观察到这种行为。如何确保仅渲染主容器边框，并且子元素没有任何影响？ https://codesandbox.io/s/focused-tree-ms4f2 import React from "react"; import styled from "styled-components"; const StyledTextBox = styled.div` height: 15vh; width: 30vw; display: flex; flex-direction: column; margin: 0 auto; border: 1px solid black; background-color: #fff; > * { box-sizing: border-box; } `; const InputBox = styled.span` height: 35%; width: 100%; display: flex; border: none; …

9 javascript  css  reactjs 

我已经编写了一个脚本（在这里用户的帮助下），该脚本允许我扩展选定的div并通过相等地拉伸以适合剩余的空间（使第一个div的宽度固定）来使其他div相应地表现。 这是我要实现的目标的图片： 为此，我使用flex和transitions。 它运作良好，但是jQuery脚本指定了“ 400％”的拉伸值（非常适合测试）。 现在，我希望所选的div扩展/缩小以完全适合内容，而不是“ 400％”固定值。 我不知道该怎么做。 可能吗 ？ 我尝试克隆div，使其适合内容，获取其值，然后使用该值转换BUT，这意味着我的初始宽度为百分比，但目标值为像素。那不行 而且，如果我将像素值转换为百分比，则无论出于何种原因，结果都不完全适合内容。 在所有情况下，这似乎都是实现我想要的目标的一种复杂方法。 是否没有可以转换的flex属性以适合选定div的内容？ 这是代码（为了便于阅读，对其进行了编辑/简化）： var expanded = ''; $(document).on("click", ".div:not(:first-child)", function(e) { var thisInd =$(this).index(); if(expanded != thisInd) { //fit clicked fluid div to its content and reset the other fluid divs $(this).css("width", "400%"); $('.div').not(':first').not(this).css("width", "100%"); expanded = thisInd; …

9 javascript  jquery  css  flexbox  css-transitions 

我一直挑战自己，以仅HTML和CSS（无Javascript）创建视觉上动态的交互式体验。到目前为止，我还没有遇到我在纯CSS和HTML中无法实现的任何功能。这可能有点困难。 我需要防止双击用户<a>，<input type="submit">和<button>标签。这是为了防止他们重复提交表单或意外向URL发出2个GET请求。如何在纯CSS中完成此操作？即使我们不能disabled没有JS进行设置，也应该有一些遮罩技术或样式组合可以在2020年处理。 这是一个简单的尝试示例： .clicky:focus{ display: none; pointer-events: none; } <a href="#down" class="clicky">test</a> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p id="down">target</p> 运行代码段隐藏结果展开摘要 不幸的是，由于某些原因，这会在触发实际的点击事件之前将其禁用。也许锚不是最好的测试方法？我将继续作进一步的尝试。

9 html  css 

显示具有以下规格的不同尺寸图像和比例的图像库： 图像之间没有空白（边距）。 尽可能尊重原始比例。 链接包围的图像。 非JS解决方案。 图像可能会被裁剪。 便携式解决方案。 显示的图像集是随机的。 图像必须从左到右显示（防止使用列）。 我通过以下flexbox解决方案实现了这一目标： 显示代码段 section { display: flex; flex-flow: row wrap; justify-content: center; } section a { flex: auto; } section img { height: 100%; width: 100%; object-fit: cover; } <!DOCTYPE html> <html lang="en"> <head> <title>Controlling flex growability</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> </style> …

9 css  flexbox  image-gallery 

我制作了一个包装纸，在其Airpods Pro页面上制作了与Apple相同的效果。基本上是视频，当我滚动视频时会一点一点地播放。视频的位置是固定的，因此文本可以很好地滚动。但是，只有在特定分隔的偏移量之间（文本显示），文本才可见。 那部分工作正常。现在，我希望当用户滚动到视频的末尾并结束动画时，将视频效果包装器从固定位置转到相对位置。这样该网站将在视频动画后正常滚动其内容。 JSFIDDLE代码+演示 这是我已经尝试过的一个示例： //If video-animation ended: Make position of video-wrapper relative to continue scrolling if ($(window).scrollTop() >= $("#video-effect-wrapper").height()) { $(video).css("position", "relative"); $("#video-effect-wrapper .text").css("display", "none"); } 这种工作...但是除了顺利以外，其他所有事情都是如此。并且还需要使网页反向滚动。 尝试解决此问题时遇到的问题： 滚动以及从固定需求到相对需求的过渡，感觉自然而流畅 包装器本身不是固定的，包含.text元素，视频是固定的，因此.text元素可以覆盖video元素（创建效果）。这些.text元素会导致尝试找到解决方案的问题

9 javascript  jquery  html  css 

我创建了一个藏宝图动画，首先，它将以浅灰色显示路径，但是随着动画开始，我希望随着填充动画“ .road”的加入，浅灰色虚线消失或变为黑色。努力使浅灰色虚线“ .steps”消失，因为填充动画越过该位置。 svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .road { stroke-dasharray: 744; stroke-dashoffset: -744; animation: draw-road 10s infinite; } .steps { stroke-dasharray: -744; stroke-dashoffset: 744; animation: draw-steps 10s reverse; } @keyframes draw-road { 0% { stroke-dashoffset: 744; stroke: #000000; } …

9 css  svg 

我需要用12个项目构建一个轮播，以模拟无限旋转的3D车轮。为了清楚起见，我需要精确地创建这种效果： https://codepen.io/SitePoint/pen/yXWXaw（在此处找到） 但具有以下新增功能（尤其是在台式机和移动设备上）： 幻灯片必须逐步滑动，也就是说，幻灯片应在滑动时移动（就像Swiper一样）。 快速滑动即可滑动许多幻灯片（如Swiper所做的那样 freeScroll）。 然后，当车轮停止旋转时，它会卡扣到前滑片上（就像Swiper使用freeModeSticky和一样 centeredSlides），它是用户选择的滑片。 每次幻灯片更改（例如slideChanged）时，我都需要回调（就像Swiper一样）。 由于所有这些原因，我认为Swiper 5.3.0是一个很好的起点。 我尝试了各种解决方法，更好的方法是使用此设置，但是这loop: true是一种糟糕的解决方法，并且会导致问题（请查看评论）： var swiper = new Swiper(el_class, { slidesPerView: 1.5, spaceBetween: 25, centeredSlides: true, grabCursor: true, speed: 550, loop: true, // <== repeat infinitely the 12 items. with fast scroll at the end of a cycle it waits a …

9 javascript  css  carousel  swiper 

我有一个使用Material UI及其主题提供程序（使用JSS）的应用程序。 我现在合并了fullcalendar-react，它实际上不是一个完整的React库-只是原始的fullcalendar代码的一个薄的React组件包装。 也就是说，我无法访问诸如渲染道具之类的东西来控制其元素样式。 但是，它确实允许您通过渲染元素时调用的回调直接访问DOM元素（例如eventRender方法）。 这是一个基本的演示沙箱。 现在，我要做的是使完整日历组件（例如，按钮）具有与我的应用程序其余部分相同的外观。 一种方法是，通过查看正在使用的类名称并相应地实现样式，我可以手动覆盖所有样式。 或者- 我可以实现Bootstrap主题-如其文档中所建议。 但是这些解决方案中的任何一个的问题在于： 会很多工作 如果我对MUI主题进行了更改，却忘记了更新日历主题，则它们将出现不同的同步问题。 我想做的是： 神奇地将MUI主题转换为Bootstrap主题。 或在MUI类名称和日历类名称之间创建映射，如下所示： .fc-button = .MuiButtonBase-root.MuiButton-root.MuiButton-contained .fc-button-primary= .MuiButton-containedPrimary 我不介意按摩选择器等使其工作（例如，MUI按钮有两个内部范围，而完整日历只有一个）。这主要是关于更改主题的时间-不想在两个地方都进行更改。 @extend我想到的是使用像Sass这样的语法。我可以很容易地用Sass创建全日历CSS-但是Sass如何访问MuiTheme？ 也许我可以采取相反的方法-告诉MUI'嘿，这些类名的样式应类似于这些MUI类'。 关于如何解决此问题的任何具体建议？

9 css  reactjs  fullcalendar  jss 

我有一个“可排序”表，其中当前排序列的标题显示一个图标： 排序图标将显示在文本的末尾（即，我们支持LTR / RTL）。我目前正在使用display:flex。但是，如果表的宽度缩小并且列标题文本开始换行，则我将进入不清楚的状态，即不清楚对哪一列进行排序： 相反，我想满足以下要求： 图标始终与最长文本行的“结尾”“紧密”对齐（即使换行单元格/按钮较宽）。 图标也应与文本的最后一行在底部对齐。 该图标绝对不能缠绕在自己的一行上。 该按钮必须存在并且应跨越单元的整个宽度。（它的内部样式和标记可以根据需要更改。） 仅在可能的情况下使用CSS和HTML。 它不能依赖已知/设置的列宽或标题文本。 例如： 我一直在尝试了一堆的不同组合display: inline/inline-block/flex/grid，position，::before/::after，甚至float（！），但无法获得所需的行为。这是我当前的代码演示问题： .table { border-collapse: collapse; width: 100%; } .thead { border-bottom: 3px solid #d0d3d3; } .thead .tr { vertical-align: bottom; } .button { padding: 1rem; text-align: start; font-family: Arial, "noto sans", sans-serif; font-size: 0.875rem; border: 0; background-color: …

9 html  css  layout  html-table  alignment