小编ztf*_*ter的帖子

如何在电子邮件中将SVG嵌入到HTML中,以便在大多数/所有电子邮件浏览器中都可以看到它?

我想在SVG中生成图形,并通过电子邮件发送嵌入其中的图形的HTML页面(不存储在服务器上并显示链接图像).

我尝试使用Object元素直接嵌入SVG,并对SVG进行序列化和URI编码,并将整个字符串指定为div上的背景图像.Outlook 2013中似乎没有显示任何内容.任何想法?

html svg html-email

23
推荐指数
2
解决办法
5万
查看次数

Flexbox自动边距不适用于IE中的justify-content:center

我有一个表格,其中一个单元格可以包含许多图标,以及文本.如果存在图标,则它们显示在文本的左侧.有几种可能的对齐情况:

  1. 仅存在图标:图标应居中
  2. 仅存在文本:文本应保持对齐
  3. 图标和文本都存在:图标和文本都应该左对齐

我认为通过使用flexbox包装表格单元格中的所有内容,使用justify-content: center;然后应用于margin-right: auto;文本div ,我可以完成此操作以及其他更复杂的对齐.

如果有文本,自动边距会将所有内容推到左侧.

如果没有,justify-content样式将使图标居中.

这是一个包含我的方法的codepen.

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border: 2px solid black;
  width: 300px;
  height: 17px;
}
.icon {
  height: 17px;
  width: 17px;
  background-color: red;
}
.text {
  margin-right: auto;
}
Run Code Online (Sandbox Code Playgroud)
<div class="flexbox">
  <div class="icon"></div>
  <div class="text">asdf</div>
</div>
Run Code Online (Sandbox Code Playgroud)

这种方法适用于Chrome,但在IE 11中没有正确应用正确的自动边距.我想知道为什么,以及我如何解决它.

额外的信息

似乎IE 11首先计算自动边距,然后对齐柔性项目而不考虑这些边距,最后尽可能地应用边距.

我相信这是因为,当justify-content: flex-end;在flexbox和文本div上设置时margin-left: auto;,图标在flexbox中右对齐,而文本被推到flexbox的边界之外几乎整个flexbox的宽度(关于什么是auto保证金应该是).

html css css3 flexbox internet-explorer-11

9
推荐指数
1
解决办法
4522
查看次数

为什么抛出错误的 React 组件会渲染两次?

我一直在试验那些执行 react-cache 风格的组件,并在 render 方法中直接调用 web 服务,向 React.Suspense 组件抛出一个 promise,并在数据存在时重新渲染。他们调用 Web 服务,检查响应,然后根据响应呈现或抛出错误到错误边界。我注意到每当在组件中抛出错误时,它都会呈现两次。第一次调用堆栈看起来正常,第二次调用堆栈包含对 invokeGuardedCallbackDev 和 invokeGuardedCallback 的调用,这似乎与 React 有关,确保即使在开发构建中被错误边界“捕获”时,错误也会出现在控制台中.

我可以通过渲染这样的组件来使用 react 和 react-dom 16.8.6 重现这一点:https ://codesandbox.io/s/components-that-throw-render-twice-i26qc 。

我想知道为什么会发生这种情况,因为它导致组件从 Web 服务重新获取数据,重新抛出另一个承诺,并导致控制台中出现“未捕获的承诺”错误。

reactjs

7
推荐指数
2
解决办法
690
查看次数

为什么空格会使弹性项目在左侧溢出?

justify-content: space-around当内容溢出flex容器时,Chrome似乎无法正确处理,并且该容器未设置为允许换行,而是水平滚动。

一些内容在flex容器的左侧溢出,并被截断。我希望它在右侧溢出,以便可以通过水平滚动来到达它。

这是一个例子:

#container {
  display: flex;
  width: 500px;
  justify-content: space-around;
  border: solid black;
  overflow: auto;
}
.item {
  min-width: 200px;
  margin: 10px;
  background-color: red;
  display: table;
  font-size: 48pt;
  text-align: center;
}
Run Code Online (Sandbox Code Playgroud)
<div id="container">
  <div class="item">1</div><div class="item">2</div>
  <div class="item">3</div><div class="item">4</div>
  <div class="item">5</div><div class="item">6</div>
</div>
Run Code Online (Sandbox Code Playgroud)

css css3 flexbox

5
推荐指数
2
解决办法
2195
查看次数

CSS 在空格上包裹文本,但仍扩展容器以适应没有空格的长字符串

我有一个包含文本的 div。div 的宽度应至少为 100 像素,并且应尝试通过将文本包裹在空白处将自身限制为 100 像素。但是,如果有一个单词或数字不包含空格,并且非常长,我希望 div 扩展以适合该字符串(即没有滚动条,没有在右侧截断文本,也不允许文本延伸到 div 之外)。最后,文本应在 div 内居中。

我知道实现这一目标的唯一方法是使用display: table-cell.

.container {
    display: table-cell;
    width: 100px;
    text-align: center;
}
Run Code Online (Sandbox Code Playgroud)

但是,我想知道是否有其他方法可以使用纯 CSS 但不使用 CSS 表来实现此行为。

.container {
    display: table-cell;
    width: 100px;
    text-align: center;
}
Run Code Online (Sandbox Code Playgroud)
.container {
  display: table-cell;
  width: 100px;
  text-align: center;
  background: skyblue;
}
Run Code Online (Sandbox Code Playgroud)

html css

5
推荐指数
1
解决办法
1488
查看次数

C++ - 使用相同的函数从文件或内存缓冲区中读取

是否有一个标准的C/C++函数,它接受文件句柄/指针或指向内存缓冲区的指针,并从文件/缓冲区中读取数据?

我有一个函数从文件中提取数据,对所述数据执行操作,并通过套接字发送出去.我还有一个函数,它以char缓冲区的形式获取数据,对该数据执行完全相同的操作,并通过套接字发送它.这个问题并不难.我只是觉得如果有像这样的功能会很方便

read(void *dest, void *src, int src_type, size_t amount)
Run Code Online (Sandbox Code Playgroud)

c c++

3
推荐指数
1
解决办法
695
查看次数

标签 统计

css ×3

html ×3

css3 ×2

flexbox ×2

c ×1

c++ ×1

html-email ×1

internet-explorer-11 ×1

reactjs ×1

svg ×1